Geek Answers Handbook

Angular $ state.go {reload: true} should not reinitialize the fathers abstract controller

I am using ui-route for navigation.
I have the state of father main , this state is abstract (url: / main) and the child states are products and users (URL: / 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 are 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") });

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 use: $ state.go ("main.products", {}, {reload: true}) to navigate

When I click on user / products in the MainCtrl menu, reinitialize !
This is because {reload:true} .

My questions:
1) Why does the father status controller also reinitialize every click?
2) I need an elegant solution to avoid MainCtrl before reinitialize !

Here is a complete example - plunker , please look at the console.

+5
source share
3 answers
  • Update your ui-router to a newer version (at least 0.2.14)
  • Change the $state.go call to something like this $state.go("main.users",{},{reload: "main.users"})

Since ui-router 0.2.14 you can pass the string as the reload value - ui router will update the state that matches the passed string and all its children.

+11
source

the reload: true parameter reloads the current and parent states (basically, from the current state to the highest level state). However, if you specify a reboot option with a status name. it only reloads the state you invested in and all its children. This is straight from the document.

0
source

I think that would be a better approach.

 <a data-ui-sref="directory.organisations.details" data-ui-sref-opts="{reload: true}">Details State</a>

We can reload state only from HTML.

0
source

More articles:


All Articles