$locationChangeSuccess triggers four times

Question

I am new to angular Js.

My application flow is as below:

1) I have a view controller wherein, each view controller sets the breadcrumb data with the help of Breadcrumbs factory.

2) Breadcrumbs factory takes data from view controller and attaches data to $location.$$state object.(reason for storing in state object is if back button is pressed, view controller doesn't instantiate so I can refer history data for breadcrumbs ) below is code to attach data to state object:

var state = $location.state();
state.breadcrumb = breadcrumbData;
$location.replace().state(state);

3) I have also created breadcrumb directive on global header which will display breadcrumbs on $locationChangeSuccess event. Directive will take data from $location.state(); which was set in factory.

My problem is when location is changed, $locationChangeSuccess event callback function executes four times.

below is my directive code:

angular.module('cw-ui')
    .directive('cwBreadcrumbs', function($location, Breadcrumbs, $rootScope) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'UI/Directives/breadcrumb',
        link: function($scope, element){
            //some code for element...

            $rootScope.$on('$locationChangeSuccess', function(event, url, oldUrl, state, oldState){

                // get data from history of location state    
                var data = $location.state();

                console.log(data);
            });
        }
    };
});

output is as below:

Object {}
Object {key: "Core/Views/dash:1", view: "Core/Views/dash", parameters: Array[0], breadcrumb: Array[2]}
Object {key: "Core/Views/dash:1", view: "Core/Views/dash", parameters: Array[0]}
Object {key: "Core/Views/dash:1", view: "Core/Views/dash", parameters: Array[0]}

breadcrumb: Array[2] disappears 1st, 3rd and 4th times. I really don't know what is causing this callback function execute four times, and I have no clue about an issue and don't know how to debug. Please help guys!

Answer 1

After running into this myself, the problem lies in the fact you are using the root scope to bind the locationChangeSuccess event from within a directive that is either encountered multiple times on a single page, or encountered multiple times as you revisit the page:

$rootScope.$on('$locationChangeSuccess', function(event, url, oldUrl, state, oldState){

Since you are binding to the rootScope, and the rootScope does not go out of scope, the event binding is not cleaned up for you.

Inside your link function, you should add a listener for the element $destroy, as well as capture the return value from the original bind, so you can later unbind it.

First: capture return value:

var unbindChangeSuccess = $rootScope.$on('$locationChangeSuccess' ...

Next, unbind that value in your destroy method:

element.on('$destroy', function() {
    unbindChangeSuccess();
});

That should solve the multiple calls to your locationChangeSuccess! :)