angularjs重复自定义指令

Question

我想从 ng-repeat 中的自定义指令中输出自定义指令以用于拖放目的。我的问题是 myWidget 正确输出 html-tag 但自定义指令未执行。

类似这篇文章： 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 + '>');
            }
        };
    });})();

inspector 显示输出是但指令没有被触发。

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