How to handle $stateChangeSuccess event if multiple states have same controllers

Question

I'm using a single controller in two states. If I navigate within these two states, and try to handle $stateChangeSuccess event, I'm facing an issue which is, in each state, the event is triggering twice.

$scope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
        // some code...
    });

I know that this is a game of $scope, but how can I handle it. Thanks in advance...

score 1 · Accepted Answer · edited May 23 '17 at 11:50

I believe you should be watching $stateChangeSuccess on the $rootScope like this instead:

$rootScope.$on('$stateChangeSuccess' function() {
    //code
};

If that's not the case, here is some good information about controller scope. From that, you should be able to watch the two events: $viewContentLoaded and $destroy

$scope.$on('$viewContentLoaded', function() {
  console.log('Stuff loaded');
});
$scope.$on('$destroy', function() {
  console.log('Destroyed');
})

From there you should be able to determine the scope issue.

How to handle $stateChangeSuccess event if multiple states have same controllers

1 Answers1