所以我希望能够像这样创作一个元素:
<div my-directive></div>
而且,我想my-directive
添加从属指令。
<div my-directive subordinate-directive></div>
目前,我在编译时添加了这些指令,但它们不会重新运行。在从指令模板生成的子元素上,我可以做任何我想做的事情,因为我可能会在指令运行之前添加到子模板中。
所以我希望能够像这样创作一个元素:
<div my-directive></div>
而且,我想my-directive
添加从属指令。
<div my-directive subordinate-directive></div>
目前,我在编译时添加了这些指令,但它们不会重新运行。在从指令模板生成的子元素上,我可以做任何我想做的事情,因为我可能会在指令运行之前添加到子模板中。
问题是在处理my-directive时,收集指令阶段已经过去,修改元素不会触发新的编译。
添加所有其他指令后,您需要再次手动触发编译阶段,请参阅plunker。
app.directive("queue", [ '$compile', function($compile) {
var directiveDefinitionObject;
directiveDefinitionObject = {
scope: {},
controller: [
'$scope', function($scope) {
$scope.entries = [{name: 1}, {name: 2}, {name: 3}];
}
],
template: $("#entry").html(),
compile : function(tElement, tAttrs, transclude) {
var compiler;
//All children related directives go here since the template hasn't been
//appended yet in the post link function when we re-compile
tElement.children().attr('ng-repeat', 'entry in entries');
compiler = {
pre : function(scope, iElement, iAttrs, controller) {
},
post : function(scope, iElement, iAttrs, controller) {
if (iElement.attr('can-do-thing-i-define') === undefined) {
var c = tElement.clone();
c.attr('can-do-thing-i-define', '');
$compile(c)(scope);
iElement.replaceWith(c);
}
}
};
return compiler;
}
};
return directiveDefinitionObject;
}]);