0

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

<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. 正如您在上面的 HTML 中看到的那样，我正在尝试根据in 中的属性设置class（选择指令） 。graphicograph

这行得通；

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 转换期间它没有被视为指令。如果有人可以提供更好的解释，也许可以解决我如何在不使用执行所有图表类型的单个指令的情况下实现这一点（就像我现在正在做的那样），这将是一个有用的帖子。

4

2 回答 2

2

如果你提供了一个 plunker\fiddle 会更好。但还是让我拍一下。你需要做的是像这样在你的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>

目前您正在做的事情不会呈现指令，因为 angular 在 html 编译阶段看不到它。它看到的是一个标准的数据绑定表达式

于 2013-05-23T13:09:47.597 回答
0

You can use ng-include to load different directives. This is the simplest way. All other way s I have seen (and implemented) have been messier. It annoys me to create an HTML template just to load each directive, that I need to apply dynamically, but it works well.

Here is my widget code fore example:

<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>

Then I set the widget.url to a template containing just the right directive.

于 2014-12-01T14:59:31.917 回答