Question

我有一个自定义角度指令包装html元素：

<my-directive-1>
    <div some-attribute="some value">My original content</div>
</my-directive-1>

将编译以将另一个指令作为属性添加到子节点：

    <div some-attribute="some value" my-directive-2>My original content</div>

这样将在子节点上触发myDirective2的控制器。

如何做到这一点？

Answer 1

在这种情况下使用$compile，以便Angular知道它是一个指令。 Angular会对此进行编译，承认存在诸如指令，数据和其他需要编译范围的事情。

首先，用新HTML覆盖元素HTML。其次，使用$compile使用Angular编译元素新内容，与scope相关。

app.directive('myDirective1', ['$compile', function ($compile) {
    return {
        link: function (scope, element) {
            element.html('<div some-attribute="some value" my-directive-2>My second content</div>');               
            $compile(element.contents())(scope);
        }
    }
}]);

app.directive('myDirective2', ['$compile', function ($compile) {
    return {
        link: function (scope, element) {
            element.html('<div some-attribute="some value">My final content after two directives</div>');
            $compile(element.contents())(scope);
        }
    }
}]);

WORKING EXAMPLE

如何将角度指令作为属性添加到子节点

1 个答案: