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.

RezKesh · Accepted Answer · 2014-09-03 16:53:56Z

4

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

answered Sep 3, 2014 at 16:53

RezKesh

2,9642 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Resist Design Over a year ago

I think you can just do $state.go('.detail', {id: newId}, {location: false})

RezKesh Over a year ago

I think so, {location: false} is the key option to do that

Eric Chen · Accepted Answer · 2014-04-30 02:47:46Z

0

You can have a abstract controller that contain your memory leak code. And a abstract controller will not update when url change.

Here is the doc from official github repo

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

look at the Combination part.

here is the plnkr, contacts controller will only call once in this demo contacts.detail controller will update every time you change state but share the scope with contacts controller http://plnkr.co/edit/gmtcE2?p=preview

answered Apr 30, 2014 at 2:47

Eric Chen

3,7082 gold badges20 silver badges15 bronze badges

2 Comments

svp Over a year ago

i have removed the scope variables but still i wouldn't want the child state controllers to reload if they are already loaded.There should be some way to stop reloading controllers but change url on state transistion??

svp Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related