How to change order in ui-router? - angularjs

Question

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?

Answer 1

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

Answer 2

You have the same template for the parent and child state, which doesn't make much sense. Are you nesting an identical template inside itself?
A child state includes its parent state. So anything in the parent state template is included in the child state.