AngularJS ui-router: reload: true also reloads the parent state

Question

In this plunk , you have two ui-router states, parent and child. When a child is called by clicking on the link, since it has the reload: true option, it always reboots. This is normal, but the problem is that the parent state is also reset. Try clicking the Fill 11 link several times and you will see that the parent’s timestamp will also be changed.

How can I reload only a child?

JavaScript:

 var app = angular.module("app", ['ui.router']); app.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/"); $stateProvider .state('state1', { templateUrl: 'state1.html', controller: function($scope) { $scope.theTime1 = Date.now(); } }) .state('state1.state11', { templateUrl: 'state11.html', controller: function($scope) { $scope.theTime11 = Date.now(); } }); }); 

Answer 1

This is actually very simple.

Do not use reload because this is exactly what you found. It reloads everything for the route.

Instead, add a parameter to your child route, and each time a link is clicked, be sure to change this parameter. This will cause the child state to reboot.

I updated your plunk with an example. I just added the num parameter and count variable every time the link is clicked.

http://plnkr.co/edit/qTA39rrYFYUegzuFbWnc?p=preview

Answer 2

The changed parameter as Matthew Foscarini suggested (this) way. There could be another solution, a technique with a state reloader. Below, and in this updated plunker , we can see a simplified version, but we can even pass some parameters there to make it more general

 .state('state1.reloader', { controller: function($state) { $state.go('state1.state11') } }) 

And we can call it that:

 // instead of this <a href="#" ui-sref="state1.state11" ui-sref-opts="{reload: true}"> // we can do this <a href="#" ui-sref="state1.reloader" > 

Check here