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.

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.

• javascript
• angularjs
• angular-ui-router

• Why do you feel the need to force reload (using the param {reload:true}) ? – JAAulde Commented May 17, 2016 at 19:55
• I have my reasons, I have to use it in my application, of course without it everithing works perfectly – cheziHoyzer Commented May 17, 2016 at 19:58
• sigh You're asking for a solution, and you won't explain your full intent. As such, my answer to your first question is "Because the UI Router devs say that's how it should work. ( angular-ui.github.io/ui-router/site/#/api/… )" My answer to your second question is, "Not enough info provided, even after it was requested. Good Luck." – JAAulde Commented May 17, 2016 at 20:00
• I don't understand, my question it's very simple! I need to use {reload: true} because I need to refresh all the data from the server on each click. How can I overcome the problem when I have to (!!!!!) use {reload:true} – cheziHoyzer Commented May 17, 2016 at 20:02

2 Answers 2

1. Update your ui-router to newer version (0.2.14 at least)
2. 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.

the reload: true option will reload current and parent states (basically from your current state to the highest level state). However, if you specify reload option with state name. it only reload the state that you put in and its all children state. This is straight from the doc