AngularJS SVG Path指令 [英] AngularJS SVG Path directive

问题描述

一个简短的问题，但想知道为什么会发生：

在下面的示例中，有两个SVG元素，每个元素都包含一个分配给a的指令元件。第一个指令不使用模板，是我当前用于将动作分配给路径的设置。

第二个指令是我试图按顺序进行的操作

我在Google上搜索了一下，并阅读了SVG和ampg之间的区别。 DOM节点？但是由于两个ng-repeat都正常工作，所以我对所发生的事情感到有些困惑。

链接到plunkr： angular.module（'app'，[]）。controller（ AppCtrl，function（$ scope）{
$ scope.items = [1,2,3 ，4];
}）。directive（'svgPathNoReplace'，function（）{
return {
limit：'A'，
范围：true，
链接：function（scope，element，attrs）{
}
}
}）。directive（'svgPathReplace'，function（）{
return {
limit：' A'，
替换：true，
模板：'< 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 zm 0,1.5 C 132.28206,1.5 170,39.8217 170,87.15625 c 0,47.33455 -37.71794,85.6875 -84.2 49999,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>'
}
}）；


解决方案

最新的beta（1.3）允许在名为 type 的指令，您可以在其中指定svg内容。

即。

 返回{
限制：'AE'，
类型：'svg'，
模板：'< path>< ; / path>'
链接：函数（..）
} 
  

Bit of a short question, but wondering why this is happening:

In the example posted below, there are two SVG elements, each containing a directive assigned to a element. The first directive doesn't use a template, and is the setup I currently use to assign actions to paths.

The second directive is what I was trying to do in order to clean up my code a bit, but it won't be drawn.

I googled a bit around, and read there is a difference between SVG & DOM nodes? But since both ng-repeat's are working, I'm a bit puzzled on what is going on.

Link to 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>'
  }
});

解决方案

The most current beta (1.3) allows another property on the directive called type where you can specify svg content now.

ie.

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

这篇关于AngularJS SVG Path指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！