如何更改ui-router中的顺序? [英] How to change order in ui-router?

问题描述

我有一个场景，我有一个列表并想对其重新排序.我还是 ui-router 的新手，我不知道该怎么做.

我的状态是这样的(决心传递数据):

$stateProvider.state('shoppings-view', {url: '/shoppings/:id',templateUrl: 'shoppings/partial/shoppings-view/shoppings-view.html'}).state('shoppings-view.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 的场景可以有两个 (如果不是更多) 解决方案.在这个工作示例中检查它们.我们可以先继续你的父子场景，我们只需要做一些改变

//父-子场景.config(['$stateProvider',功能($stateProvider){//父子$stateProvider.state('shoppings-view', {url: '/shoppings/:id',templateUrl: 'tpl.shoppings-view.html',控制器:'ParentCtrl'，}).state('shoppings-view.order', {网址:'/:订单'，模板:'
如果需要一些子内容
'，控制器:'ChildCtrl'，});}]).controller('ParentCtrl', function($scope, $state, $stateParams, DataSvc) {$scope.data = [];//父级在 $scope 上声明方法$scope.load = 函数(参数){$scope.data = DataSvc.getAll(params)}$scope.load($stateParams);}).controller('ChildCtrl', function($scope, $state, $stateParams) {//子作用域继承了那个函数//并调用父级以使用新参数重新加载$scope.load($stateParams);})

我们在这里可以看到，孩子继承了 $scope(参见 了解作用域)，因此可以访问父方法$scope.load($stateParams);.每当有调用新参数的新子状态时，它都会调用父状态来重新加载数据.

这里可能不是最好的，但是在父 $scope 上发布方法的概念，可用于孩子(ren)是我经常使用的功能......

第二种方法可能是将所有这些东西移动到一个简单的状态，并带有更多参数:

//单态场景.config(['$stateProvider',功能($stateProvider){//单态$stateProvider.state('购物', {url: '/shoppings-single/:id/:order',templateUrl: 'tpl.shoppings-single.html',控制器:'SingleCtrl',解决 : {数据:函数($stateParams，DataSvc){返回 DataSvc.getAll($stateParams)}}});}]).controller('SingleCtrl', function($scope, $state, $stateParams, data) {$scope.data = 数据；$scope.orderBy = $stateParams.order;})

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

所有这些一起检查这里

I have a cenario where I have a list and want to reorder it. I'm still new on ui-router and I couldnt figure out how to do it.

My states is something like this (with resolve to pass the data):

$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'
    });

And here my controller:

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

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

And a simple view with use a ng-repeat to show them. The problem is: if I'm in the url: /shoppings/1 and change the link to /shoppings/1/date the controller is not recalled and I can't change the order. So, how can I do something like that?

解决方案

This scenario with ui-router could have two (if not even more) solutions. Check both of them here in this working example. We can firstly continue with your Paren-Child scenario, we just have to do few changes

// 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);
})

What we can see here, is that child gets the $scope inherited (see Understanding Scopes) and therefore has access to a parent method $scope.load($stateParams);. Whenever there is new child state with new param invoked, it calls parent to relaod the data.

Maybe not the best here, but the concept of published methods on parent $scope, available for a child(ren) is a feature I do use a lot...

Second approach could be to move all that stuff into one simple state, with more params:

// 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;
})

There is nothing special, just we can see that one state can have more params (see URL Parameters)

All that together check here

这篇关于如何更改ui-router中的顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！