Reputation: 5729
I have two state in Angular UI router:
State
|-Menus (with 2 nested state)
| |- menus.list
| |- menus.instruction
|-Order
When I access menus.list from menus I get the scope with id 4 however when I access menus from Order I get scope with scope id 28.
The reason this create a problem for me because I register the following function inside Menus
controller.
$rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
if(toState.name === 'menus.list'){
$scope.stateOrder = 1;
}
if(toState.name === 'menus.instruction'){
$scope.stateOrder = 2;
}
});
The problem I am facing is when I access menus.list from Menus
it update my $scope.stateOrder
in template file, but when I enter menus.list
from Order
state it doesn't update my $scope.stateOrder
in template. Why this is happening?
Upvotes: 2
Views: 467
Reputation: 7988
When you switch between sibling states, then new controller is created and new $scope variable for Menu
is created. So the easiest way to fix that is to move your $stateChangeSuccess
logic to State's controller, so it's $scope going to be updated and value will be available in child controllers.
Upvotes: 0
Reputation: 18875
I think you want to place the code with $rootScope
in the run phase under the config
part of your angular app, which will trigger the call back function for setting your stateOrders. for example:
angular.module('yourApp', ['ui.router'])
.config(function($stateProvider, $urlProvider) {
//details omitted
}).run(function($rootScope, $urlRouter, $state, $stateParams) {
$rootScope.$on('$stateChangeSuccess', function(e, toState) {
e.preventDefault();
if(toState.name === 'menus.list'){
$scope.stateOrder = 1;
}
if(toState.name === 'menus.instruction'){
$scope.stateOrder = 2;
}
})
});
Upvotes: 1