2013-03-18 54 views
1

所以我希望能够创作元素,像这样:添加从属指令?

<div my-directive></div> 

而且,我想my-directive添加下级指令。

<div my-directive subordinate-directive></div> 

目前,我在编译时添加这些指令,但它们不会重新运行。从指令模板生成的子元素,我可以做任何我想做的事情,因为我可能在指令运行之前添加到子模板。

实施例: http://plnkr.co/edit/6y6Ebzqf1gLkTBEUcKfi?p=preview

+0

你能提供一个plunker,它可能是更容易帮助 – 2013-03-18 13:55:23

+0

“他们没有得到一个父元素重新运行” - 我不是在这里跟着你。你能多解释一下吗? – 2013-03-18 14:02:05

+0

我在这里会变得有些迂腐。那不是“下属指令”。这将是一个“兄弟指示”。我不能看到你想从另一个指令插入兄弟指令的原因。我相信,在几乎所有的情况下,如果你试图从另一个指令中插入一个指令(然后编译它),你可以在模板中执行它,或者根本不需要执行它(也就是说,你可以重构这个更好)。 – ganaraj 2013-03-18 17:40:22

回答

1

的问题是,由时间MY-指令正在被处理的收集指令相已通过和修改元件将不会触发一个新的编译。

您需要在添加所有其他指令后再次手动触发编译阶段,请参阅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; 
}]); 
+0

格拉西亚斯!稍微看一下我的代码。 – RandallB 2013-03-19 00:34:50