Question

我有一组自定义图表指令，例如<div class='ico-graph'/>，我正在尝试根据icograph中包含的配置生成一堆它们，包括指令名称，数据和标题; < / p>

<div ng-repeat="icograph in vm.icographs" ng-class="icograph.graph"  title="icograph.title"
    values="icograph.data">
</div>

指令本身支持EAC，因此可以是元素，属性或类定义，例如;

angular.module('myApp.directives')
    .directive("icoGraph", [function () {
        return { 
            restrict: "EAC",
            scope: {
                type: "=",
                title: "=",
                values: "=",

            },
            template: "<ng-include src=\"'/ng/app/views/directives/IcoGraph.htm'\"></ng-include>",
            link: icoGraphLinker({}), // inits the linker function which returns a link function
        }
    }])
}

问题

现在这些指令在静态定义时工作正常，但我想根据icograph.graph中包含的标记名称选择图表类型。我正在尝试根据class中的graph属性设置icograph（选择指令），如上面的HTML中所示。

这有效;

class="ico-graph"
class="{{'ico-graph'}}"

但这些没有（我没有图表）;

class="{{icograph.graph}}"
ng-class="{{'nupe-ico-graph'}}"
ng-class="{{icograph.graph}}"
ng-class="icograph.graph"

另外，如果我在页面中发出{{icograph.graph}}，我可以验证它是否包含字符串"ico-graph"

我假设评估或范围的顺序在某种程度上是ng-repeat的问题，但我不太明白这个问题。

实际上，我怀疑这与编译有关。可能ng-repeat在插值之前获取了我的节点定义的副本，并且在dom转换期间它不被视为指令。如果有人可以提供更好的解释，也许我可以解决如何在不使用执行所有图表类型的单个指令的情况下实现这一目标（就像我现在正在做的那样），这将是一个有用的帖子。

Answer 1

如果你提供了一个龙头\小提琴，那就更好了。但还是让我试一试。你需要做的是在你的HTML中创建一个模板

<script type="text/ng-template" class="template" id="ico-graph">
     <span data-ico-graph="">
</script>

现在您的代码变为

<div ng-repeat="icograph in vm.icographs"  title="icograph.title"
    values="icograph.data">
          <ng-include src='icograph.graph'/>
</div>

目前你正在做的是不渲染指令，因为在html编译阶段，angular没有看到它。它看到的是标准的数据绑定表达式

Answer 2

您可以使用ng-include加载不同的指令。这是最简单的方法。我见过（并实施过）的所有其他方式都比较混乱。令我很生气的是创建一个HTML模板只是为了加载我需要动态应用的每个指令，但它运行良好。

以下是我的小部件代码示例：

<div ng-repeat="widget in widgets track by $index" ng-include="widget.url" class="widget-container" ng-class="widget.widget_type.config.height +' ' + widget.widget_type.config.width">
</div>

然后我将widget.url设置为一个只包含正确指令的模板。

在ng-repeat中动态生成自定义指令

问题

2 个答案: