fire $stateChangeSuccess event when loading page

[Archelyst]

When loading a page the correct state and controller is loaded, but the $stateChangeSuccess event is not fired as it is when the state is changed after page load. At least I cannot receive it in the controller. It would be convenient and IMHO consistent to also have this event on page load.

[christopherthielen]

Are you saying this only happens on initial page load that you don't get the stateChangeSuccess? But you receive the stateChangeSuccess event in your view's controller on a state change to that state?

[Archelyst]

Exactly.

[Archelyst]

I tried to plunker this, but there it works. Could it be that this has been fixed? I'm on 0.2.10 here.

[Archelyst]

Well, I think I found the problem. Here is the relevant plunker: http://plnkr.co/5LWFavorM5WTjju9OqfK

The problem is that the controller that registers for the event is only loaded after the state has changed the first time. A few questions:

1. Is that the expected behavior? I would assume that the controller etc are loaded before the state change is performed.
2. I noticed that the controller is loaded several times but never destroyed. (Click on 'Home' and then 'Route2 Sub1' repeatedly.) Looks to me like a huge memory leak.
3. Is there a better way to ask the controller to alter $scope after 'its' state as been reached? Listening for all stateChagenSuccess events and filtering for the correct ones in all respective controllers feels cumbersome and not clean. (AFAIK the before() function of the state cannot act on the $scope, at least I didn't manage to.)

[tinyfly]

Until this gets fixed is there a recommended way I can tell what state the page is in on the initial load?

[christopherthielen]

@Tim-Erwin

1. Yes this is expected behavior. Controllers are part of the View. They are invoked in response to a $stateChangeSuccess.

2. As controllers are functions, they are invoked, not loaded.

• Your controller is invoked each time the state is entered. Each time, you are adding a new listener for the $stateChangeStart event to the $rootScope.
• You're adding a listener to the $rootScope. $rootScope never gets destroyed, so anything you register there you are responsible for cleaning up too. If you had added the listeners to the controller's $scope, they would have been deregistered automatically when the controller's $scope is $destroy()'ed

3. Just alter the $scope in the controller. I don't get it? What are you trying to do?

[christopherthielen]

@tinyfly

app.run(function($rootScope) { 
  $rootScope.$on("$stateChangeSuccess", function(event, toState, toParams, fromState, fromParams) {
    if (fromState.name === "") { 
      // The initial transition comes from "root", which uses the empty string as a name.
      alert("initial state: " + toState.name);
    }
  });
});

[tinyfly]

Thanks for that @christopherthielen. Though, I didn't realize I could get the current state by injecting the $state service in my controller. So I'm handling it that way instead.

[epelc]

Thanks @christopherthielen that fixed my problem. I never thought to check $stateChangeSuccess figured I must have a $stateChangeStart first.

[epelc]

This isn't perfect I think we need a way to prevent the first state from loading. Since if like in my case you are checking for auth the user will see the page they load flash then they are sent to the login page if they aren't logged in.

I think we should have a $stateChangeStart first for the first state with something identifying it's the first state like fromState == undefined

[christopherthielen]

checking for fromState.name === "" indicates that it's the initial transition.