angularjs 重复自定义指令

Question

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

类似于此 post： 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));
}

angularjs 重复自定义指令

angularjs repeat custom directive

angularjs

angularjs-directive

ng-repeat