I’m using ui-route for navigation.
I have father state called main, it’s an abstract
state (the url: /main) and child states products and users (urls: /main/products and /main/users).
app.config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/main/products"); $stateProvider .state("main", { url:"/main", templateUrl: "main.html", abstract: true, controller: "MainCtrl", }) .state("main.products", { templateUrl: "products.html", controller: "productsCtrl", }) .state("main.users", { templateUrl: "users.html", controller: "usersCtrl", }) } ]);
And here my controllers:
app.controller('MainCtrl', function($scope,$state) { console.log("I'm Main controller") $scope.goToProduct = function() { //$state.go("main.products",{}) $state.go("main.products",{},{reload:true}) } $scope.goToUsers = function() { //$state.go("main.users",{}) $state.go("main.users",{},{reload:true}) } }); app.controller('usersCtrl', function() { console.log("I'm users controller") }); app.controller('productsCtrl', function() { console.log("I'm products controller") });
The HTML:
<ul> <li style="cursor:pointer" ng-click="goToProduct()">Click for products</li> <li style="cursor:pointer" ng-click="goToUsers()">Click for users</li> </ul> <br> <div style="font-size:28px" ui-view></div>
As you can see, I’m using: $state.go(“main.products”,{},{reload:true}) for navigation
When I’m clicking on users/products on the menu the MainCtrl
reinitialize!!
It’s because the {reload:true}
.
My questions:
1) Why the “father” state controller also reinitialize on each click?
2) I need an elegant solution to avoid the MainCtrl
to reinitialize!
Here is the complete example – plunker please look at the console.
Answer
- Update your ui-router to newer version (0.2.14 at least)
- Change
$state.go
call to something like this$state.go("main.users",{},{reload: "main.users"})
Since ui-router 0.2.14 you can pass string as reload
value – ui router will refresh state that matches to passed string and all its children.