如果在单个DOM元素上有多个指令,并且应用顺序很重要,则可以使用priority
属性来排序其应用程序。较高的数字优先。如果未指定,则默认优先级为0。
编辑:讨论之后,这是完整的工作解决方案。关键是要删除属性:element.removeAttr("common-things");
,以及element.removeAttr("data-common-things");
(如果用户data-common-things
在html中指定)
angular.module('app')
.directive('commonThings', function ($compile) {
return {
restrict: 'A',
replace: false,
terminal: true, //this setting is important, see explanation below
priority: 1000, //this setting is important, see explanation below
compile: function compile(element, attrs) {
element.attr('tooltip', '{{dt()}}');
element.attr('tooltip-placement', 'bottom');
element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
$compile(iElement)(scope);
}
};
}
};
});
可以使用工作的监听器:http ://plnkr.co/edit/Q13bUt?p=preview
要么:
angular.module('app')
.directive('commonThings', function ($compile) {
return {
restrict: 'A',
replace: false,
terminal: true,
priority: 1000,
link: function link(scope,element, attrs) {
element.attr('tooltip', '{{dt()}}');
element.attr('tooltip-placement', 'bottom');
element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html
$compile(element)(scope);
}
};
});
演示
解释为什么我们必须设置terminal: true
and priority: 1000
(一个很大的数字):
当DOM准备就绪时,angular遍历DOM以标识所有已注册的指令,并根据priority
这些指令是否在同一元素上来逐一编译指令。我们设定的自定义指令的优先级为较高的数字,以确保它会被编译首先,用terminal: true
,其他指令将被跳过该指令被编译后。
编译我们的自定义指令时,它将通过添加指令并删除自身来修改元素,并使用$ compile服务编译所有指令(包括已跳过的指令)。
如果我们没有设置terminal:true
和priority: 1000
,则有可能在自定义指令之前编译了某些指令。当我们的自定义指令使用$ compile编译element =>时,再次编译已经编译的指令。这将导致无法预测的行为,尤其是如果在我们的自定义指令之前编译的指令已经转换了DOM。
有关优先级和终端的更多信息,请查看如何理解指令的“终端”?
也修改模板的指令的示例是ng-repeat
(priority = 1000),在ng-repeat
编译时,ng-repeat
在应用其他指令之前制作模板元素的副本。
感谢@Izhaki的评论,这里是对ngRepeat
源代码的引用:https : //github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js
RangeError: Maximum call stack size exceeded
它将永远进行编译。