使用 ng-repeat 向页面添加指令

Question

我正在尝试使用 ng-repeat 向页面添加指令。基本上我想做这样的事情：

<{{ currentDirective.directiveName }} ng-repeat="currentDirective in directiveList" />

这是我在上下文中尝试做的一个例子。

http://jsfiddle.net/s9hf758w/

Answer 1

您为什么要尝试以这种方式添加指令？根据您的示例，您的指令 return 有什么不同？不确定你到底想完成什么，但正确的方法是

<div my-directive ng-repeat="i in item" />

并且该指令将在其控制器或link函数中具有逻辑

Answer 2

我分叉了 fiddle 并使用我称为 bind-compiled-html:

的指令制定了一个解决方案

http://jsfiddle.net/hiebj/Lbusqf26/

指令代码：

function bindCompiledHtml($compile) {
    return {
        restrict: 'A',
        link: function($scope, $element, $attrs) {
            var html = $scope.$eval($attrs.bindCompiledHtml),
                toCompile = angular.element(html);
            $element.append($compile(toCompile)($scope));
        }
    };
}

用法：

<div ng-repeat="directive in directiveHtmlList"
    bind-compiled-html="directive.directiveHtml">
</div>

此解决方案不需要 $sanitize 或 $sce.trustAsHtml，并且不会让您的控制器出现混乱的 DOM 细节。我还包含了一个名为 bind-directive 的版本，以防您确实需要遍历指令名称列表，但 bind-compiled-html 更灵活。

您可以通过使用 $sce.trustAsHtml 和 ng-bind-html 成功插入 HTML，但如果您这样做，Angular 将不会注意到您已添加对您的 DOM 的指示。在 ng-repeat 运行后，你必须告诉它 $compile 新的 DOM 元素。

这将使您接近您正在寻找的内容，但不幸的是，您将无法直接在您的自定义指令上使用 ng-repeat。您将不得不在包装元素上使用它 - ng-repeat 是一个仅限属性的指令。指令的 replace 属性已被弃用，此外，它会破坏您原来的 ng-repeat，从而导致重大问题。使用 bind-compiled-html 解决方案，您将得到：

<div class="ng-scope ng-binding"
    ng-repeat="directive in directiveHtmlList"
    bind-compiled-html="directive.directiveHtml">
    <first-directive></first-directive>
</div>
<div class="ng-scope ng-binding"
    ng-repeat="directive in directiveHtmlList"
    bind-compiled-html="directive.directiveHtml">
    <second-directive></second-directive>
</div>

有关更多信息，请查看 ng-bind-html (the inspiration for bind-compiled-html) and $compile 上的 Angular 文档。

使用 ng-repeat 向页面添加指令

adding directives to a page using ng-repeat

angularjs

angularjs-directive

angularjs-ng-repeat

ng-repeat