angularjs重複自定義指令

Question

我想輸出自定義指令在ng-repeat中的自定義指令，以便拖放目的。我的問題是，myWidget正確輸出html標籤，但是自定義指令未被執行。

類似這樣的帖子： ng-repeat in combination with custom directive

主要指令模板：

<div class="col-lg-5 hidden-md main-column" style="height:inherit;" 
     ng-model='list2' 
     data-drop="true" 
     data-jqyoui-options="{accept:'div:not([ng-model=list2])'}" 
     jqyoui-droppable="{multiple:true}"> 

     <div ng-repeat="item in list2" 
      ng-model="list2" 
      data-drag="{{item.drag}}" 
      data-jqyoui-options="{revert: 'invalid'}" 
      jqyoui-draggable="{index: {{$index}},animate:true}"> 
       <div my-widget="item.widget"></div> 
     </div> 

指令進行動態調用：

(function(){ 
"use strict"; 

angular 
    .module('achilles') 
    .directive('myWidget', function() { 
     return { 
      scope: { 
       w: '=myWidget' 
      }, 
      restrict: 'EA', 
      priority: 300, 
      link: function(scope, element, attrs) { 
       element.replaceWith('<' + scope.w + '>'); 
      } 
     }; 
    });})(); 

的檢查顯示輸出，但指令不觸發。

(function(){ 
"use strict"; 

angular 
    .module('achilles') 
    .directive('anamnesisWidget', anamnesisWidget); 

是否存在導致3.指令不觸發的某種優先級或範圍問題？

Answer 1

您需要在使用$compile替換之前使用指令元素compile，這樣底層的指令纔會被調用，並且會呈現它的元素。

代碼

link: function(scope, element, attrs) { 
    element.replaceWith($compile('<' + scope.w + '/>')(scope)); 
}