AngularJS UI Router $state reload child state only

Question

I am using UI router for tabs of a main menu as well as for links within one of the states (users). The users state has a list of users and when a user is clicked, I want t

Answer 1

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

Answer 2

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...

Answer 3

$state.transitionTo("State Here", {"uniqueRequestCacheBuster": null});

This will simply reload only that child state as you wanted. not the whole hierarchy of states.

Answer 4

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'});