Question

我有一组用于绘制svg图表的Angular指令，我需要使用它。确切的指令名称取决于图表的类型（即'barlineChart'，'bulletChart'等）。为了简化事情而不是copypaste，我决定创建一个'wrapper'指令，让你选择图表类型。

如果使用原始指令，html看起来如下：

<g x-barline-chart
   x-chart-properties="{{component1.properties}}"></g>
<g x-bullet-chart
   x-chart-properties="{{component2.properties}}"></g>

用我的新指令：

<g x-ng-repeat="component in chart.components"
   x-chart-type="{{component.chartType}}"
   x-chart-properties="{{component.properties}}"></g>

指令代码：

.directive('chartType', ['$compile', function($compile) {
    return {
        scope: {
            type : '@chartType'
        },
        link: function (scope, element, attributes) {
            attributes.$set(scope.type, "");
            $compile(element.contents())(scope);
        }
    }
}]);

这是问题所在。新元素被编译，如果我检查DOM，我可以看到它添加了新属性。但是，它没有呈现，似乎没有使用我刚刚附加的新指令。

我做错了什么？

Answer 1

我认为你修改DOM时需要使用指令的预链接功能（或者甚至是编译功能），角度需要知道新元素（即：注入的元素包含角度代码）

参见https://code.angularjs.org/1.2.16/docs/api/ng/service/ $ compile

要将其更改为预链接，请执行以下操作：

.directive('chartType', ['$compile', function($compile) {
    return {
        scope: {
            type : '@chartType'
        },
        link: {
            pre : function (scope, element, attributes) {
                attributes.$set(scope.type, "");
                $compile(element.contents())(scope);
            }
        }
    }
}]);

如果这不起作用，那么您可能需要使用编译功能。但我过去做过这种指令，从来不需要使用编译功能，pre-link对我来说没问题。

SVG的Angular替换指令（结果在DOM中但不显示）

1 个答案: