Javascript SVG的角度替换指令（结果在DOM中，但不显示）

我有一组用于绘制svg图表的角度指令，我需要使用这些指令。确切的指令名称取决于图表的类型（即“barlineChart”、“bulletChart”等）。为了简化操作，而不是复制粘贴，我决定创建一个“包装器”指令，让您选择图表类型

如果使用原始指令，html的外观如下所示：

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

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

---

我做错了什么？

我认为在修改DOM时，可能需要使用指令的pre-link函数（甚至可能是compile函数），angular需要注意新元素（即：注入的元素包含angular代码）

参见$compile

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

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

---

如果这不起作用，那么您可能需要改用compile函数。但是我以前做过这种指令，从来都不需要使用compile函数，pre-link对我来说没问题。

我不确定，但也许你需要调用

范围。$apply（）

？试过了<代码>$compile（element.contents（））（范围）已经调用了

$scope.$apply（）

，但即使我在timeout中换行，这也不起作用。似乎不适用于svg。我认为您可能需要将您的

g

放在

div

中，并在该

div

上使用您的指令。然后，

$compile（element.contents（））

将编译此

div

中的每个元素。现在您的元素似乎没有子元素，因此它没有任何可编译的内容。如果您发布一个jsfiddle；，那么会更容易提供帮助渴望尝试和帮助，但确实需要JSFIDLE或plunk来帮助。

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

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