How to call onEnter when changing from Substate to Parentstate?

Question

I wonder why the onEnter function is not called, when changing from substate to parentstate? Is there any other function that gets called? I tried this:

$stateProvider.state('stateA', {
url: '/stateA',
views: {
  'content': {
    templateUrl: 'views/Aview.html',
    controller: 'ControllerA'
  },
  'dialog': {
    template: "<div ui-view='dialog'></div>"
  }
},
onEnter: function ($state, olSelectInteractionService){
  // IS NOT getting called
},
onExit: function (olSelectInteractionService){

}
});

  $stateProvider.state('stateA.sub', {
url: '/sub/:id',
views: {
  'dialog': {
    templateUrl: 'views/Bview.html',
    controller: 'ControllerB',  // This Controller does something like $state.go("stateA");
    resolve: {
      ad: function (AdLoader, $stateParams) {
        return AdLoader($stateParams.id);
      }
    }
  }
}
});

score 1 · Accepted Answer · answered Dec 23 '14 at 10:16

Well, the answer is:

when navigating from a child to its parent - onEnter cannot be triggered - because we already are in the parent state. When child state is init, its parent must be as well

But having in place comment in your code:

...
controller: 'ControllerB',  // This Controller does something like $state.go("stateA");
resolve: {
...

Especially this:

This Controller does something like $state.go("stateA");

We can adjust that call:

$scope.goToParent = function(){$state.go('parent', null, {reload : true});}

There is a working plunker. It shows that when we are in child state, this won't re-trigger onExit:

<a ui-sref="parent"> // we already are in parent state

But this will:

<button ng-click="goToParent()">

See: go(to, params, options) (mostly reload)

... options (optional) object

Options object. The options are:

location - {boolean=true|string=} - If true will update the url in the location bar, if false will not. If string, must be "replace", which will update url and also replace last history record.

inherit - {boolean=true}, If true will inherit url parameters from current url.

relative - {object=$state.$current}, When transitioning with relative path (e.g '^'), defines which state to be relative from.

notify - {boolean=true}, If true will broadcast $stateChangeStart and $stateChangeSuccess events.

reload (v0.2.5) - {boolean=false}, If true will force transition even if the state or params have not changed, aka a reload of the same state. It differs from reloadOnSearch because you'd use this when you want to force a reload when everything is the same, including search params.

Check it here

Hey, thanks a lot. I tried it with reload: true, but in this case the template is also reloaded. For me, in the template is a canvas object and i dont want the canvas to flush for a part of a second when i change states. Do you have any idea how i can keep the template untouched, but get the onEnter/onExit called? — Xam_Green, Dec 23 '14 at 19:04
Honestly, the biggest advantage of the UI-Router is in the behaviour you do not like... Parent is loaded once (onEnter triggered once). That is the effective way. But if you want to improve your experience, you can move the onEnter into controller and create solution similar to this http://stackoverflow.com/a/27587503/1679310. Check that answer and plunker carefully and you should see how to... — Radim Köhler, Dec 23 '14 at 19:40

How to call onEnter when changing from Substate to Parentstate?

1 Answers1