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

I'm trying to add directives to a page using ng-repeat. Basically I want to do something like:

我正在尝试使用ng-repeat向页面添加指令。基本上我想做的是:

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

Here's an example of what I'm trying to do in context.

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

http://jsfiddle.net/s9hf758w/

2 个解决方案

#1

I forked the fiddle and worked out a solution using a directive I called bind-compiled-html:

我用一种名为“bind-compiled-html”的指令，拨开了小提琴，找到了一个解决方案。

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

Directive code:

指令代码:

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

Usage:

用法:

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

This solution doesn't require $sanitize or $sce.trustAsHtml and keeps the messy DOM details out of your controller. I also included a version called bind-directive in case you really need to iterate over a list of directive names, but bind-compiled-html is more flexible.

这个解决方案不需要$sanitize或$sce。trustAsHtml并将混乱的DOM细节从控制器中删除。我还包含了一个名为bind-directive的版本，以防您需要对一系列指令名进行迭代，但是bind-compiled-html更加灵活。

You could successfully insert the HTML by using $sce.trustAsHtml along with ng-bind-html, but if you do that, Angular won't notice that you've added directives to your DOM. You have to tell it to $compile the new DOM elements after ng-repeat runs.

您可以使用$sce成功插入HTML。trustAsHtml与ng-bind-html一起，但是如果您这样做，那么棱角不会注意到您已经向您的DOM添加了指令。您必须让它在ng-repeat运行后编译新的DOM元素。

This will get you close to what you are looking for, but unfortunately you will not be able to use ng-repeat directly on your custom directive. You will have to use it on a wrapping element - ng-repeat is an attribute-only directive. The replace property of directives is deprecated, and besides it would cause major problems by destroying your original ng-repeat. Using the bind-compiled-html solution, you will end up with:

这将使您接近您正在寻找的内容，但不幸的是，您无法在自定义指令上直接使用ng-repeat。您将不得不在包装元素上使用它——ng-repeat是一个仅用于属性的指令。指示的replace属性已被废弃，此外，它还会破坏原来的ng-repeat，从而导致重大问题。使用绑定-编译-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>

For more, check out the Angular docs on ng-bind-html (the inspiration for bind-compiled-html) and $compile.

更多信息，请查看ng-bind-html(绑定-compiled-html的灵感来源)和$compile上的有棱角的文档。

#2

Why are you trying to add directives this way? Based on your example, the directives that you have return something different? Not sure what exactly you are trying to accomplish but the proper way to do it would be to have

为什么要这样添加指令呢?基于您的示例，返回的指令不同吗?不确定你到底想要完成什么，但是正确的方法是拥有

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

and the directive will have logic in it's controller or link functions

指令在控制器或链接函数中有逻辑

#1