angularjs – 通过带有角度js的URL传递变量

发布时间：2020-12-17 07:31:29 所属栏目：安全来源：网络整理

导读：我正在使用角度来制作电子商务,而我正在设置无限滚动到产品列表页面.一切正常,但我想使用URL来设置页面,因此用户可以通过URL访问特定页面.如何在URL中设置像“pageNumber”这样的变量？比如“www.page.com/page/2/”(我想得到2号并将其传递给商店控制员) 这

我正在使用角度来制作电子商务,而我正在设置无限滚动到产品列表页面.一切正常,但我想使用URL来设置页面,因此用户可以通过URL访问特定页面.如何在URL中设置像“pageNumber”这样的变量？比如“www.page.com/page/2/”(我想得到2号并将其传递给商店控制员)

这是我现在的代码

(function() {
var app = angular.module('concurseirosUnidos',['store-directives','ngRoute']);
    app.config(function($routeProvider,$locationProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
    .when('/',{templateUrl: 'partials/products-list.html'})
    .when("/page/$pageNumber"),{
        // probably I'd need to put something here?
    })
     .otherwise({redirectTo:'/'});;
    }
});

  app.controller('StoreController',['$http','$scope',function($http,$scope){
    var store = this;
    store.products = [];      

    $http.get('/app/products/products.json').success(function(data){
        store.products = data;
    });

    if(typeof page === 'undefined'){
        var page = 1;   
    }else{
      //if it's defined through the url,page = pageNumberFromURL
    }
    $scope.myLimit = 3 * page;

    $scope.nextPage = function () {
        page++; // I want this function to actually update the url and get the variable from there
        $scope.myLimit = 3 * page;
    };

  }]);

})();

您使用$routeParams来获取$route定义中特定命名组的值.

REFERENCE

例：

.config(function($routeProvider) {
  $routeProvider.when('/page/:page_number',{
    // your route details
  });
})

.controller('Ctrl',function($scope,$routeParams) {
  console.log($routeParams.page_number); // prints the page number
});

关于你的代码,它应该看起来像这样：

(function() {
var app = angular.module('concurseirosUnidos',{templateUrl: 'partials/products-list.html'})
    .when("/page/:page_number"),{
        templateUrl: 'partials/page.html',// I made this up
        controller: 'StoreController'
    })
     .otherwise({redirectTo:'/'});;
    }
});

  app.controller('StoreController','$routeParams',$scope,$routeParams){
    var store = this;
    var page = $routeParams.page_number;
    store.products = [];      

    $http.get('/app/products/products.json').success(function(data){
        store.products = data;
    });

    if(typeof page === 'undefined'){
        var page = 1;   
    }else{
      // if $routeParams.page_number is defined to you implementation here!
    }

    $scope.myLimit = 3 * page;

    $scope.nextPage = function () {
        page++; // I want this function to actually update the url and get the variable from there
        $scope.myLimit = 3 * page;
    };

  }]);

})();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!