AngularJS UI Router $state reload child state only
The current ui-router (0.2.14 and above) added support to reload child state.
Simply put $state.go('your_state', params, {reload: 'child.state'});
will do the job.
See: https://github.com/angular-ui/ui-router/issues/1612 and https://github.com/angular-ui/ui-router/pull/1809/files
As documented in API Reference , we can use $state.reload
:
$state.reload(state)
A method that force reloads the current state. All resolves are re-resolved, controllers reinstantiated, and events re-fired.
Parameters:
state
(optional)
- A state name or a state object, which is the root of the resolves to be re-resolved.
An example:
//will reload 'contact.detail' and 'contact.detail.item' states
$state.reload('contact.detail');
Similar we can achieve with a $state.go()
and its options
parameter:
$state.go(to, params, options)
...
options
(optional)
location
...inherit
...relative
...notify
...reload
(v0.2.5) - {boolean=false|string|object}, If true will force transition even if no state or params have changed. It will reload the resolves and views of the current state and parent states. If reload is a string (or state object), the state object is fetched (by name, or object reference); and \ the transition reloads the resolves and views for that matched state, and all its children states.
Example from https://github.com/angular-ui/ui-router/issues/1612#issuecomment-77757224 by Chris T:
{ reload: true } // reloads all,
{ reload: 'foo.bar' } // reloads top.bar, and any children
{ reload: stateObj } // reloads state found in stateObj, and any children
An example
$state.go('contact', {...}, {reload: 'contact.detail'});
I have gotten it to work. I used what Radim suggested, but I had to add the url element to the state.
.state('users.userGroups', {
url: '/userGroups/{userTrigger}',
templateUrl: '/User/UserGroups',
controller: 'UserGroupController as userGroupCtrl'
})
and in my controller, when a user clickes on a link, I use the $state.transitionTo
:
var params = angular.copy($state.params);
params.userTrigger = params.userTrigger === null ? "" : null;
$state.transitionTo($state.current, params, { reload: false, inherit: true, notify: true });
Just an FYI for any other newbies out there:
after I added the url to the
.state
, I started having issues with my api calls. It was prepending the urls to the api methods with the url in my.state
. You just have to be sure to have a leading/
in your api urls:
.factory('usersInGroup', function($http) {
return {
get: function(groupName) {
return $http.get('/api/UserApi/GetInGroup/' + groupName);
}
}
I saw and learned some pretty interesting stuff trying to muddle through this...