Question

我有两个＆＃34; A＆＃34; -directives。我想将它们应用于div元素。

我试图改变html文件中的顺序。我试图改变JS文件中的顺序。但结果是一样的 - 首先警告mydirective2，然后是mydirective1。

如何更改订单？我想先mydirective1，第二个mydirective2。

main.js：

var app = angular.module("angularBlackbox", []);

app.directive("mydirective1", function () {
    return {
        restrict: "A",
        link: function () {
            alert("mydirective1 works!!!");
        }
    }
});

app.directive("mydirective2", function () {
    return {
        restrict: "A",
        link: function () {
            alert("mydirective2 works!!!");
        }
    }
});

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Blackbox</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div ng-app="angularBlackbox">
    <div mydirective1 mydirective2></div>
</div>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Answer 1

您可以使用DDO中的优先级来自文档

当在单个DOM元素上定义了多个指令时，有时需要指定应用指令的顺序。 priority用于在调用compile函数之前对指令进行排序。优先级定义为数字。首先编译具有更大数字priority的指令。预链接功能也按优先级顺序运行，但后链接功能以相反的顺序运行。具有相同优先级的指令的顺序是未定义的。默认优先级为0

— AngularJS Comprehensive Directive API Reference - priority

var app = angular.module("angularBlackbox", []);

app.directive("mydirective1", function () {
return {
    restrict: "A",
    priority: 200,
    link: function () {
        alert("mydirective1 works!!!");
    }
 }
});

app.directive("mydirective2", function () {
return {
    restrict: "A",
    priority: 100,
    link: function () {
        alert("mydirective2 works!!!");
    }
  }
});

Understanding Priorities in AngularJS Directive Definition Objects和Directive Priority in AngularJS博客很好地解释了角度指令中的优先级

如何控制AngularJS中应用属性指令的顺序？

1 个答案: