Question

有人能解释一下这段代码中发生了什么吗？我了解link函数是在compile之后执行的。

link vs compile.js是：

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是：

<!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>

由于上述原因，div出现红色背景颜色，因为link稍后执行，因此可能覆盖了效果compile功能。但是，当我将link vs compile.js更改为此格式时：

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");

        }
    };
});

现在div背景为red，为什么？如果稍后执行link功能，div不应该yellow颜色？

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

Answer 1

没有关于angularjs link或compile的内容，这与css类似

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

如果更改班级的顺序

，将不会发生任何事情

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

更多详情：How to specifiy the order of CSS classes?

Answer 2

它甚至不是Angular相关问题，而是css相关问题。在red中写入的highlight和style tag类的顺序是有所作为的。

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

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

如果上面的内容改为：

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

        .highlight{
            background:yellow;
        }

    </style>

然后div转为yellow。

Answer 3

你需要删除其他类，因为你已经添加了两个类，所以会得到不可预见的结果。这将解决问题：

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");

        }
    };
});

在Link函数中使用addClass与AngularJS

3 个答案: