Question

我有一个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，则控制器不会被调用，我无法更改订单。那么，我该怎么做呢？

Answer 1

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', function($scope, $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', function($scope, $state, $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）是我使用很多的功能......

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

// 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', function($scope, $state, $stateParams, data) {
  $scope.data = data;
  $scope.orderBy = $stateParams.order;
})

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

所有这些一起检查here

Answer 2

您对父级和子级状态具有相同的模板，这没有多大意义。你在自己里面嵌套一个相同的模板吗？

子状态包括其父状态。因此，父状态模板中的任何内容都包含在子状态中。

如何在ui-router中更改订单？

2 个答案: