I have an AngularJS app which is using ui.router and the plugin ui.router-extras, specifically the sticky-state module. This allows me to cache the rendered DOM from a given parent state downwards.
The problem is that when I transition to a state that I've set as 'sticky' (i.e. cached), none of the events associated with that state fire. OnEnter and Resolve have both run already and are cached, it seems.
states.push({ name: 'root.planner', url: 'planner',
abstract: true,
views: {
'planner-tab': {
controller: 'planner',
templateUrl: 'views/planner/_planner.html'
}
},
sticky:true,
deepStateRedirect: true
});
states.push({ name: 'root.planner.home', url: '',
controller: 'planner.home',
templateUrl: 'views/planner/_planner.home.html',
resolve: {
'promiseDays': function(PlannerService){
return PlannerService.getDays();
}
},
onEnter: function(StatusService){
//set editable
StatusService.toggleEditIcon(true);
},
onExit: function(StatusService){
//set editable
StatusService.toggleEditIcon(false);
}
});
What I need is a way to allow OnEnter to run or some similar event that can be tailored to each state. Ideally, this would be inside the state config above (so I can avoid doing a state-name check on every stateChangeSuccess, for instance), but I'm open to suggestions.
From the issue raised on GitHub, Christ T (developer of ui-router-extras) helpfully suggested this:
"While it's not documented, Sticky states will invoke onInactivate and onReactivate callbacks. See the source code at the following lines:"
onInactivate
onReactivate
Which works perfectly for me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With