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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With