Question

我有许多指令要编译并附加到DOM。例如：

mod.controller("ctrl, ["$scope", "$compile", function($scope, $compile) {
    $scope.tools = [
        {
            title: "foo",
            directive: $compile("<foo-bar></foo-bar>")($scope)
        },
        {
            title: "qux",
            directive: $compile("<qux-bar></qux-bar>")($scope)
        }
        ...
    ];

然后在HTML中：

<div ng-repeat="tool in tools">
    <div class="tool">
        <h3>{{tool.title}}</h3>
        {{tool.directive}}
    </div>
</div>

我希望将每个指令编译并注入DOM。但没有任何反应。我希望因为我打电话给$compile太迟了。有更好的方法吗？

FWIW，如果我编译指令并“手动”将它附加到DOM，它就可以工作：

$('body').append($compile('<foo-bar></foo-bar>')($scope));

Answer 1

你不能这样做; {{...}}绑定不接受元素。可以接受HTML，但这个HTML是静态的 - 未编译的。

如果你想要动态指令，你必须自己动手。一种选择是使用辅助指令，例如下面的container-directive：

<div class="tool" container-directive> <h3>{{tool.title}}</h3> <placeholder style="display: none"></placeholder> </div>

从其上下文tool获取$compile，并替换虚拟占位符元素。假设tools定义为：

this.tools = [ { title: 'foo', directive: 'foo-bar' }, { title: 'qux', directive: 'qux-bar' } ];

然后一个非常简单的实现是：

app.directive('containerDirective', function($compile) { return { restrict: 'A', link: function(scope, elem, attrs) { elem.find('placeholder') .replaceWith($compile('<' + scope.tool.directive + '></' + scope.tool.directive + '>')(scope)); } }; });

看一个小提琴：http://jsfiddle.net/kxj60cbo/

此代码演示了一般概念。它肯定需要一些调整，以满足您的需求。例如。该指令与迭代变量的名称紧密耦合 - tool - 也许使用隔离范围会更好。

Answer 2

我不会注射我只会限定要显示的内容

<div ng-repeat="tool in tools">
    <div class="tool">
        <h3>{{tool.title}}</h3>
        <foo-bar ng-if="tool.title = 'foo'"></foo-bar>
        <qux-bar ng-if="tool.title = 'qux'"></qux-bar>
    </div>
</div>

如何循环指令，编译和附加到DOM？

2 个答案: