Using addClass in Link function vs uisng addClass in Compile function in AngularJS

Question

Can anyone explain what is happening in this code? I understand that link function is executed after compile.

link vs compile.js is:

var app = angular.module('myApp', []);
app.directive('highlight', function () {
    return {
        restrict: 'A',
        compile: function ($element, $attr, $transclude) {
            console.log('executed highlight');
            $element.addClass("highlight");
            //$element.addClass("red");

        }
    };
});

app.directive('red', function () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attr) {
            console.log('executed red');
            $element.addClass("red");
            //$element.addClass("highlight");

        }
    };
});

link vs compile.html is:

<!DOCTYPE html>

<html ng-app="myApp">
    <head>
        <script src="js/angular.js" type="text/javascript"></script>
        <script src="js/link vs compile.js" type="text/javascript"></script>

        <style type="text/css">
            .highlight{
                background:yellow;
            }

            .red{
                background: red;
            }

        </style>

    </head>
    <body>

        <div ng-repeat="word in ['abc','def','ghi']" red highlight >
            {{word}}
        </div>


    </body>
</html>

As a result of above is that div appears with the red background color which makes sense as link was executed later so it may have overwritten the effect compile function. But when I change link vs compile.js to this form:

var app = angular.module('myApp', []);
app.directive('highlight', function () {
    return {
        restrict: 'A',
        compile: function ($element, $attr, $transclude) {
            console.log('executed highlight');
            //$element.addClass("highlight");
            $element.addClass("red");

        }
    };
});

app.directive('red', function () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attr) {
            console.log('executed red');
            //$element.addClass("red");
            $element.addClass("highlight");

        }
    };
});

Now div is with red background, why is that? If link function was executed later should not div have yellow color?

Code @ http://plnkr.co/edit/RJtnuVHtZvgFAraG2eVa?p=preview

To understand the difference between compile and link :http://stackoverflow.com/questions/12164138/what-is-the-difference-between-compile-and-link-function-in-angularjs — Tasnim Reza, Oct 18 '15 at 06:17
Probably your div has both classes so you get unexpected result, try remove red class when adding highlight class and vice versa — Ori Price, Oct 18 '15 at 06:34

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

1

This is nothing about angularjs link or compile, this is about css like

<div class="highlight red">my div</div>

Nothing will be happened if you change the order of the class

<div class="red highlight">my div</div>

more details: How to specifiy the order of CSS classes?

edited May 23 '17 at 11:58

Community

1
1

answered Oct 18 '15 at 06:40

Tasnim Reza

6,058
3
25
30

score 0 · Answer 2 · answered Oct 18 '15 at 06:41

It's not even Angular related problem rather it's css related problem. Order in which red and highlight classes written in style tag is what makes difference.

   <style type="text/css">
        .highlight{
            background:yellow;
        }

        .red{
            background: red;
        }
    </style>

if above is changed to this :

   <style type="text/css">
        .red{
            background: red;
        }

        .highlight{
            background:yellow;
        }

    </style>

then div turns yellow.

Probably your div has both classes so you get unexpected result, try remove red class when adding highlight class and vice versa. see my answer below — Ori Price, Oct 18 '15 at 06:42

score 0 · Answer 3 · answered Oct 18 '15 at 06:44

you need to remove the other class, you get uneexpected result because you have added both classes. this will resolve the issue:

var app = angular.module('myApp', []);
app.directive('highlight', function () {
    return {
        restrict: 'A',
        compile: function ($element, $attr, $transclude) {
            console.log('executed highlight');
            $element.removeClass("highlight");
            $element.addClass("red");

        }
    };
});

app.directive('red', function () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attr) {
            console.log('executed red');
            $element.removeClass("red");
            $element.addClass("highlight");

        }
    };
});

Using addClass in Link function vs uisng addClass in Compile function in AngularJS

3 Answers3