Angular Ui Router :stop $state.go to reload controllers but change URL

Question

My app uses $state.go when switching between tabs and this cause to re-initializes the controllers and scope variable in those controllers get updated and causes memory leaks. Is there a way to stop re-initializing the controllers but change URL on state change?

Example below is routes.js in my app.

.state('home', 
{
    abstract    : true,            
    url         : '/home',
    templateUrl : 'scripts/home.html'
})
.state('home.summary', 
{
    url        : '/summary?userId', 
    controller : 'SummaryCtrl',                
    views      : 
    {               
        summary: 
        {
            templateUrl: 'scripts/home/summary.html'
        }
    }
})
.state('home.summary.detail', 
{
    url        : '/detail/:id',
    controller : 'DetailCtrl',                 
    views      : 
    {               
        detail: 
        {
            templateUrl: 'scripts/home/detail.html'
        }
    }
})

How to stop reloading DetailCtrl but change URL when going to state home.summary.detail if the DetailCtrl is already loaded for unique id???

Also tried to $q.reject in resolve of child state, it stops reload of controllers but doesn't change url.

Also tried reloadOnSearch=false it stops reload of controllers but doesn't change url.

Answer 1

You can use $state.transitionTo instead of $state.go . $state.go calls $state.transitionTo internally but automatically sets options to { location: true, inherit: true, relative: $state.$current, notify: true } . You can call $state.transitionTo and set location: false . For example:

$state.go('.detail', {id: newId}) 

can be replaced by

 $state.transitionTo ('.detail', {id: newId}, { location: false, inherit: true, relative: $state.$current, notify: true })