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)); 
}