What events can be triggered when ui.router goes sticky?

Question

I have an AngularJS application that uses ui.router and plugin ui.router-extras, in particular the sticky state module. This allows me to cache the DOM render from the given parent state down.

The problem is that when I go into the state that I set to “sticky” (i.e. cached), none of the events associated with this fire state. It seems that OnEnter and Resolve are already working and are cached.

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

I need a way to fire OnEnter or some similar event that can be adapted to each state. Ideally, this will be inside the state configuration above (so I can avoid checking the state name for each stateChangeSuccess, for example), but I'm open to suggestions.

Answer 1

From an issue raised on GitHub, Christ T (developer of ui-router-extras) gratefully suggested the following:

“Until it is documented, Sticky states will trigger onInactivate and onReactivate callbacks. See the source code in the following lines:”

onInactivate

onReactivate

Which works great for me.