0.2.18 $stateChangeSuccess not fired during (fired before?) state's controller construction

[rcollette]

We had this code in the constructor (TypeScript) of a controller which was working fine while we had a resolve defined on the controller's state that was doing an XHR request.

  this._stateChangeRemoveListener = $scope.$on('$stateChangeSuccess', () => {
    if ($state.current.name === this._currentState) {
      this._initialize();
    }
  });

The code is necessary not just for initial controller construction but also when we return to the state from a child state in which case the controller is not reconstructed and we want to re-initialize the state of the controller.

When we removed the resolve from the state, we noticed the $stateChangeSuccess event was no longer being fired or it had been fired prior to creating the listener in the controller's constructor.

I added back a fakeResolve on the state of:

      resolve: {
        fakeResolve: ['$q', '$timeout', function ($q:ng.IQService, $timeout:ng.ITimeoutService) {
          let deferred = $q.defer<any>();
          $timeout(() => {
            deferred.resolve(true);
          }, 200);
          return deferred.promise;
        }]
      },

And the $stateChangeSuccess handler was being triggered again (I could go as low as 140ms but I couldn't get consistent handler calls).

What is the proper way to initialize a controller that ensures that the stateChange has succeeded before running controller initialization logic?

I would have thought the controller construction sequence would not vary in relation to the stateChangeSuccess event. Am I missing something in the documentation?

Thank you.

[rcollette]

Could this be similar to #2048

[christopherthielen]

I think this is very likely related to the code we added for #1643

I think we will be reverting that code in 0.2.19 in favor of exposing the animation promise: #2562

See also #2485

@rcollette can you try adding noanimation to your ui-view tag?
<div ui-view noanimation></div>

[rcollette]

Sorry it took so long to respond.

I used noanimation but via hacking the source to just return the statics in the getRenderer method (would be nice if this could be done globally via a provider option).

That didn't help. What I've been able to observe is that the $stateChangeSuccess handler in my view controller works when line 3956 of the ui-view directive

        scope.$on('$stateChangeSuccess', function() {
          updateView(false);
        });

is called before $stateChangeSuccess is broadcast on line 3352. It seems somewhat random as to when this happen and is infrequent when using 200ms in the fakeResolve timer I mentioned previously. If I bump the timer up to 800ms, ui-view registers the handler every time prior to $stateChangeSuccess being raised.

It appears that $stateChangeSuccess is being raised before the root ui-view is compiled.

[christopherthielen]

Oh, I see... you are trying to listen for the $stateChangeSuccess that triggered the ui-view to load? That only works if loading the ui-view happens completely synchronously. It's synchronous only in the most simple cases. In general, you should assume that the ui-view could be loaded async could be async stuff between the state change and the ui-view loading.

If you examine these lines: https://github.com/angular-ui/ui-router/blob/legacy/src/viewDirective.js#L203-L205 , you can see that ui-view is indeed loaded in response to a $stateChangeSuccess event.

[stale]

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues
may be reopened.

Thank you for your contributions.