ng-repeat中的AngularJS Dynamic Directives

Question

我試圖在ng-repeat內動態地創建指令。我有一個directive-writer，它創建了一些其他指令，但directive-writer似乎沒有輸出指令屬性。所以第二組指令從不被渲染。

查看this Plunker的完整演示。

總之我有這個指令標籤：

<div ng-repeat="dir in directives" directive-writer 
    directive-text="{{ dir.text }}" directive-type="{{ dir.directive }}"></div> 

範圍數據：

$scope.directives = [ 
    { directive: 'one', text: 'I am One' }, 
    { directive: 'two', text: 'I am Two' }, 
    { directive: 'three', text: 'I am Three' } 
]; 

指令定義：

.directive('directiveWriter', function() { 
    return { 
     restrict: 'A', 
     compile: function(tElement, tAttrs) { 

      tElement.html('<div say="' + tAttrs.directiveText + '" ' 
       + tAttrs.directiveType + '>' + tAttrs.directiveType + '</div>'); 
     } 
    }; 

而且3個指令，所有像這樣的：

.directive('one', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     template: '<h3 class="one"></h3>', 
     compile: function(tElement, tAttrs) { 
      tElement.text('One says, ' + tAttrs.say); 
     } 
    }; 

問題是directiveWriter不寫出來的tAttrs.directiveType值只作爲文本屬性...

所以呈現的HTML是：

<div say="I am One" {{ dir.directive }} class="ng-binding">one</div> 

其中，「三」是內部的渲染div作爲文本沒有問題，但永遠不會呈現爲屬性。

我不明白：

• 爲什麼文本「三」可以在div的文本中而不是作爲一個屬性的約束。
• 爲什麼該類設置爲「ng綁定」。

Answer 1

其中一個問題是屬性被解析爲html的順序。他們在範圍上是可用早些時候週期這裏有一種方法可以做到這一點：

HTML：

<div directive-writer directive-text="dir.text" directive-type="dir.directive"></div> 

指令：

angular.module('app').directive('directiveWriter', function($compile) { 
    return { 
     restrict: 'A', 
     scope:{ 
      directiveType:'=', 
      directiveText:'=' 
     }, 
     link:function(scope,elem, attrs){ 
      var template='<div say="' + scope.directiveText + '" ' + scope.directiveType + '>' + scope.directiveType + '</div>'; 
      template= $compile(template)(scope); 
      elem.replaceWith(template); 
     } 
    }; 
}); 

DEMO

Answer 2

我修改你的榜樣。現在它可以工作。你應該使用$ compile。

看到這個

(http://plnkr.co/edit/2pUzPClubLLBlfap8fhk?p=preview)