Question

你好，互联网的人！我有一些IE特定的问题，我希望有人可以帮助我...

我正在尝试在属性级指令中使用ng-transclude来转换SVG内部的内容。我将属性放在一个SVG元素上，并尝试通过ng-repeat渲染一系列矩形（或者实际上，无论我想要什么样的SVG元素）。这一切都与Firefox，Chrome甚至Opera完美配合。然而，使用IE和新的Edge浏览器，浏览器只是清空了应该被转换的内容（我得到一个空的父元素）。

angular.module("test", []).directive("transcludeTest", [function(){
  return{
    restrict: 'A',
    templateNamespace:"svg",
    transclude: true,
    template: '<g ng-transclude></g>'
  }
}]);

<svg>
  <g transclude-test>
    <!-- whatever SVG content I want -->
    <rect x="50" y="50" width="100" height="100"></rect>
  </g>
</svg>

结果：

<svg>
  <g transclude-test=""></g>
</svg>

甚至更奇怪的是，在HTML元素（Div等）上使用属性级指令可以正常工作。

这有点难以解释，所以我已经包含了一个带有示例的Plunker。它应该使用“Testing”和3个黑色方块渲染3个h1标签。在普通浏览器中，一切都按预期加载。在Microsoft浏览器中，只有“测试”文本呈现。

http://plnkr.co/edit/tx2nKq0NA3GGV6PUwnWq

Answer 1

事实证明，IE和Edge只是不能正确支持AngularJS和SVG。为了使它工作，你必须实现一些黑客攻击。第1步：删除Angular SVG指令中的所有转换。他们只是赢了工作。第2步：在所有SVG指令上设置replace：true。

在此处查看示例： http://plnkr.co/edit/tx2nKq0NA3GGV6PUwnWq

angular.module("test", []).directive("angularTest", [function(){
    return{
     restrict: 'A',
        templateNamespace:"svg",
        replace: true,
        template: '<g><rect ng-repeat="step in [1,2,3]" width="50" height="50" x="0" y="10" ng-attr-x="{{step * 50}}" stroke="#dbdbdb" fill="#000000" stroke-width="1"></rect> </g>'
    }
}]);

令人讨厌的是，这意味着您必须包含所有已被转换为模板一部分的内容。或者，如果你能逃脱它，不要支持IE / Edge; - ）

Answer 2

你必须用<object>标签包裹被剥去的svg内容，然后只删除对象标签，留下奶油牛轧糖中心。

angular.module("test", []).directive("transcludeTest", [function(){
  return {
    restrict: "E",
    transclude: true,
    template: "<object type='image/svg+xml' ng-transclude><g></g></object>"
  }
}]);

我从这篇文章中得到了一些灵感，尽管他的解决方案似乎不仅仅是需要的。 http://blog.akquinet.de/2014/02/26/interactive-svg-with-angularjs-part-2/

使用Angular属性指令

2 个答案: