Directive Doesn't Update Angular

Js:

myApp.directive('locationClass', function ($location) {

    return {
        restrict : 'A',
        link: function (scope, element) {
            var currentLocation = $location.path();

            var formatCurrentLocation = currentLocation.replace(/\//g, " ");

            //console.log(currentLocation);
            element.addClass(formatCurrentLocation);
    }

    }

});

Html

<html ng-app="myApp" ng-controller="headerCtrl as header" location-class>

it works corrrectly , but when pages load, it updated , when i change steps the value does not update .

Url Example: CounterForm/InstallCounter to CounterForm/CounterEquipment

I'm using Ui-router .
Any Idea ? Thanks

Solution

Your link function is called only once when the directive gets rendered.

This means that when your html was rendered for the first time, then only, the function was called. And so it did the work. When the url changes, you need listeners to update according to the changes.

It won't have live connections to the URL.

You need to create a listener on $locationChangeSuccess event in the link function. That should do your work.

Check here for documentation. Search for this function there. Then whenever you change your url, it will be called and the changes will be done. Your directive becomes like:

myApp.directive('locationClass', function ($location, $rootScope) {

    return {
        restrict : 'A',
        link: function (scope, element) {
            $rootScope.$on('$locationChangeSuccess', function () {
                var currentLocation = $location.path();

                var formatCurrentLocation = currentLocation.replace(/\//g, " ");

                //console.log(currentLocation);
                element.addClass(formatCurrentLocation);
            });

    }
}

UPDATE for the purpose of toggling classes:

You use a scope variable instead. We can just have a variable to store the class and put the variable on the html. Check the locationClass variable in the html.

So your html will be like :

<html ng-app="myApp" ng-controller="headerCtrl as header" location-class class="{{locationClass}}">

and your directive, we modify as :

myApp.directive('locationClass', function ($location, $rootScope) {

    return {
        restrict : 'A',
        link: function (scope, element) {
            $rootScope.$on('$locationChangeSuccess', function () {
                var currentLocation = $location.path();

                var formatCurrentLocation = currentLocation.replace(/\//g, " ");
                scope.locationClass = formatCurrentLocation;

            });

    }
}

So now whenever you change your location, when the change is successful, the variable will be updated on the class attribute and your html will have new class. You don't need to remove the old class manually.

I think this will solve the problem and also it is a better way of doing stuff. We don't want to handle DOM directly unless necessary in AngularJS. If variable can do that, we do it.

UPDATE 2:(if you want to use watch):

We can keep a watch on location.path() and use that also to track the classname.

myApp.directive('locationClass', function ($location, $rootScope) {

    return {
        restrict : 'A',
        link: function (scope, element) {

            scope.$watch('$location.path()', function(currentLocation) {

                var formatCurrentLocation = currentLocation.replace(/\//g, " ");
                scope.locationClass = formatCurrentLocation;
            });

    }
}

But still I would recommend that you go for the listener on location change success. The reason being that the watch is heavy and will be triggered everytime the scope becomes dirty(means almost everytime if the scope is on body) whereas the event listener will call the function only when the url gets changed. You can put a console inside the function to check and verify this.