如何更改UI路由器订单?路由器、如何更改、订单、UI

2023-09-14 00:14:09 作者:~忘却一丝心动、

我有一个cenario在那里我有一个列表,并希望重新排序。我还是UI的路由器上新的,我不能弄清楚如何做到这一点。

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

和与使用NG重复向他们展示一个简单的观点。现在的问题是:如果我的网址:/买东西/ 1和更改链接/买东西/ 1 /日的控制器不召回,我不能改变顺序。所以,我怎么可以做这样的事情?

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?

推荐答案

这与 UI路由器方案可以有两个的(如果不是更)解决方案。在此工作示例在这里查看他们两个。我们可以先继续使用您的括号,儿童的情况,我们只需要做一些修改

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

我们可以看到这里,是,孩子得到继承$范围(见了解作用域),并因此具有访问父类的方法 $ scope.load($ stateParams); 。每当有新的参数新的子状态调用,它调用父relaod数据。

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...

第二条本办法可能是所有的东西转移到一个简单的状态,更多的PARAMS:

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

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

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

所有一起检查这里