2013-03-18 51 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