Question

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

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

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

http://jsfiddle.net/s9hf758w/

Answer 1

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

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

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

Answer 2

我分配了小提琴并使用我称为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添加了指令。在$compile运行后，您必须告诉它ng-repeat新的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上的Angular文档（bind-compiled-html的灵感）和$compile。

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

2 个答案: