javascript - AngularJS SVG 路径指令

Question

有点简短的问题，但想知道为什么会这样:

在下面发布的示例中，有两个 SVG 元素，每个元素都包含分配给元素的指令。第一个指令不使用模板，是我目前用来为路径分配 Action 的设置。

第二个指令是我试图做的，目的是稍微清理一下我的代码，但它不会被绘制。

我用谷歌搜索了一下，发现 SVG 和 DOM 节点之间存在差异？但是由于两个 ng-repeat 都在工作，我对发生的事情有点困惑。

plunkr 链接:http://plnkr.co/edit/cok6O58SOUyaGHG5Jtu5?p=preview

angular.module('app', []).controller("AppCtrl", function($scope) {
    $scope.items = [1,2,3,4];
  }).directive('svgPathNoReplace', function() {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, element, attrs) {
    }
  }
}).directive('svgPathReplace', function() {
  return {
    restrict: 'A',
    replace: true,
    template: '<path id="1" d="M 85.750001,0 C 38.393651,0 0,39.02444 0,87.15625 c 0,48.13181 38.393651,87.1875 85.750001,87.1875 C 133.10635,174.34375 171.5,135.28806 171.5,87.15625 171.5,39.02444 133.10635,0 85.750001,0 z m 0,1.5 C 132.28206,1.5 170,39.8217 170,87.15625 c 0,47.33455 -37.71794,85.6875 -84.249999,85.6875 C 39.217941,172.84375 1.5,134.4908 1.5,87.15625 1.5,39.8217 39.217941,1.5 85.750001,1.5 z" '+ 
    'style="stroke:#000000;stroke-width:1px;"></path>'
  }
});

Answer 1

最新的测试版 (1.3) 允许在名为 type 的指令上使用另一个属性，您现在可以在其中指定 svg 内容。

即。

return {
    restrict : 'AE',
    type : 'svg',
    template : '<path></path>'
    link : function (..)
}