如何更改ui-router中的訂單？

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重複顯示他們。 問題是：如果我在url：/ shoppings/1中，並將鏈接更改爲/ shoppings/1/date，則控制器不會被撤回，我無法更改訂單。那麼，我該如何做這樣的事情呢？

Answer 1

此場景與ui-router可能有兩個（如果不是更多）解決方案。請在this working example這裏檢查它們。我們可以先繼續使用您的括號，孩子的情況下，我們只需要做一些改變

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

我們可以看到這裏，是孩子得到$範圍繼承（見Understanding Scopes），因此可以訪問父方法$scope.load($stateParams);。每當新的子狀態被新的參數調用時，它就會調用父進程來重新傳遞數據。

也許不是這裏最好的，但對父母$範圍公開的方法，可用於子女的概念，是一個功能我使用了很多...

第二條本辦法可能是將所有這些東西變成一個簡單的狀態，更多的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 Parameters）

所有一起檢查here

Answer 2

您對父狀態和子狀態具有相同的模板，這沒有多大意義。你是否在自己內嵌套了一個相同的模板？

子狀態包括其父狀態。因此父狀態模板中的任何內容都包含在子狀態中。