angularjs – 如何在ui-router中更改顺序？

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

导读：我有一个cenario,我有一个列表,并想重新排序.我仍然是ui-router的新手,我无法弄清楚如何做到这一点. 我的状态是这样的(决定传递数据)： $stateProvider .state('shoppings-view',{ url: '/shoppings/:id',templateUrl: 'shoppings/partial/shoppings-view/sh

我有一个cenario,我有一个列表,并想重新排序.我仍然是ui-router的新手,我无法弄清楚如何做到这一点.

我的状态是这样的(决定传递数据)：

$stateProvider
    .state('shoppings-view',{
        url: '/shoppings/:id',templateUrl: 'shoppings/partial/shoppings-view/shoppings-view.html'
    }).state('shoppings-view.order',{
        url: '/:order',templateUrl: 'shoppings/partial/shoppings-view/shoppings-view.html'
    });

在这里我的控制器：

angular.module('shoppings').controller('ShoppingsViewCtrl',function($scope,$stateParams){

    $scope.order = $stateParams.order != undefined ? $stateParams.order : 'id';
}

并使用ng-repeat显示它们的简单视图.
问题是：如果我在url：/ shoppings / 1并将链接更改为/ shoppings / 1 / date,则控制器不会被调用,我无法更改订单.那么,我该怎么做呢？

解决方法

使用ui-router的这种情况可能有两个(如果不是更多)解决方案.在 this working example这里检查它们.我们可以先继续你的Paren-Child场景,我们只需做一些改动

// Parent - Child Scenario
.config(['$stateProvider',function($stateProvider) {

  // parent child
  $stateProvider
    .state('shoppings-view',{
      url: '/shoppings/:id',templateUrl: 'tpl.shoppings-view.html',controller: 'ParentCtrl',})
    .state('shoppings-view.order',{
      url: '/:order',template: '<div>some child content if needed</div>',controller: 'ChildCtrl',});

 }])
.controller('ParentCtrl',$state,$stateParams,DataSvc) {
  $scope.data = [];
  // parent declares method on a $scope
  $scope.load = function(params){
    $scope.data = DataSvc.getAll(params)
  }
  $scope.load($stateParams);
})
.controller('ChildCtrl',$stateParams) {
  // child scope has inherit that function
  // and calls the parent to relaod with new params
  $scope.load($stateParams);
})

我们在这里看到的是,子节点继承了$scope(参见Understanding Scopes),因此可以访问父方法$scope.load($stateParams);.只要有新的子状态调用了新的param,它就会调用parent来重新加载数据.

也许这里不是最好的,但是对于一个孩子(ren)可用的父$scope的已发布方法的概念是我使用了很多…

第二种方法可能是将所有内容转移到一个简单的状态,更多的参数：

// scenario with Single state
.config(['$stateProvider',function($stateProvider) {

  // single state
  $stateProvider
    .state('shoppings',{
      url: '/shoppings-single/:id/:order',templateUrl: 'tpl.shoppings-single.html',controller: 'SingleCtrl',resolve : {
        data : function($stateParams,DataSvc){
          return DataSvc.getAll($stateParams)
        }
      }
    }); 

}])
.controller('SingleCtrl',data) {
  $scope.data = data;
  $scope.orderBy = $stateParams.order;
})

没有什么特别的,只是我们可以看到一个州可以有更多的参数(见URL Parameters)

所有这一起检查here

（编辑：李大同）

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