我正在尝试构建一个指令,该指令负责向其声明的元素 添加更多指令。 例如,我想构建一个指令来处理添加datepicker,datepicker- language和ng-required="true".
datepicker
datepicker- language
ng-required="true"
如果我尝试添加这些属性然后使用$compile我显然会生成一个无限循环,所以我正在检查我是否已经添加了所需的属性:
$compile
angular.module('app') .directive('superDirective', function ($compile, $injector) { return { restrict: 'A', replace: true, link: function compile(scope, element, attrs) { if (element.attr('datepicker')) { // check return; } element.attr('datepicker', 'someValue'); element.attr('datepicker-language', 'en'); // some more $compile(element)(scope); } }; });
当然,如果我没有$compile元素,属性将被设置但指令不会被引导。
这种方法是正确的还是我做错了?有没有更好的方法来实现相同的行为?
UDPATE :鉴于这$compile是实现这一目标的唯一方法,有没有办法跳过第一个编译过程(元素可能包含多个子元素)?也许通过设置terminal:true?
terminal:true
更新 2 :我尝试将指令放入一个select元素中,并且正如预期的那样,编译运行了两次,这意味着预期options 的数量是两倍。
select
option
如果您在单个 DOM 元素上有多个指令并且它们的应用顺序很重要,您可以使用该priority属性来对它们的应用程序进行排序。较大的数字首先运行。如果您未指定 1,则默认优先级为 0。
priority
编辑 :讨论后,这是完整的工作解决方案。关键是 删除属性 : element.removeAttr("common- things");,以及element.removeAttr("data-common-things");(如果用户data-common- things在 html 中指定)
element.removeAttr("common- things");
element.removeAttr("data-common-things");
data-common- things
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); } }; } }; });
工作 plunker 可在以下网址获得: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和priority: 1000(一个高数字):
terminal: true
priority: 1000
priority 当 DOM 准备好后,angular 会遍历 DOM 以识别所有已注册的指令,并根据这些指令是否在同一元素上 一一编译指令。我们将自定义指令的优先级设置为较高的数字,以确保首先编译它,并且在编译 该 指令terminal: true后将 跳过 其他指令。
当我们的自定义指令被编译时,它将通过添加指令和删除自身来修改元素,并使用 $compile 服务来 编译所有指令(包括那些被跳过的指令) 。
如果我们不设置terminal:trueand priority: 1000,则有可能在我们的自定义指令 之前 编译了一些指令。当我们的自定义指令使用 $compile 编译元素时 => 再次编译已经编译的指令。这将导致不可预知的行为,特别是如果在我们的自定义指令之前编译的指令已经转换了 DOM。
也修改模板的指令的示例是ng-repeat(priority = 1000),在ng-repeat编译时,ng-repeat 在应用其他指令之前制作模板元素的副本 。
ng-repeat
感谢@Izhaki 的评论,这里是对ngRepeat源代码的引用:https ://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js
ngRepeat