Angular with SVG圖形

我對Angular js很新穎。我不明白爲什麼Angular無法正常使用<svg>。當我試圖讓SVG元素主動配合角度，我看到錯誤控制檯：例如，在指令我有以下模板：Angular with SVG圖形

<svg xmlns='http://www.w3.org/2000/svg' class='svgtime'>\ 
    <path stroke='#fff' stroke-width='5' d='M {{radius+line_size}} 2.50000119262981 A {{radius+line_size-2.5}} {{radius+line_size-2.5}} 0 1 1 {{radius+line_size-0.1}} 2.500055466403296 Z' fill='transparent'></path> 
    <path fill='transparent' stroke='#9BC7F2' stroke-width='2' ng-attr-d='M 60 2 A 58 58 0 0 1 77.83716831288882 5.497827994417321'></path>

我還設置radius變量指令的範圍，但是這個代碼不起作用。控制檯表示我已爲路徑元素的d屬性賦值。正如Angular指令的官方文檔中所建議的那樣，我也嘗試ng-attr-d，但它不起作用？爲什麼會這樣。 SVG元素有什麼特別之處？我認爲這與Angular如何將{{}}替換爲實際值有關。在<svg>被渲染並且我得到錯誤之後，可能{{value}}被Angular替換爲$interpolate。另外我知道關於這樣的技巧：How to prevent AngularJS from making lowercase HTML attributes但爲什麼ng-attr-*不起作用？

來源

2014-09-10 Oleksandr Papchenko

你能告訴我們你收到的錯誤信息嗎？ – 2014-09-10 20:32:13

所以我認爲SVG屬性不能用於數據綁定。相反，您可以爲自定義屬性製作自己的指令。更改自定義屬性，您可以在SVG中更改目標屬性。例如，

tester.directive("svgD", function() { 
return { 
    scope : { 
     "svgD" : '@' 
    }, 

    link: function(scope,element, attr) { 
      attr.$observe("svgD",function() { 
       attr.$set("d",scope.svgD); 
      }); 
    } 

}

}）;

解決方案與How to prevent AngularJS from making lowercase HTML attributes相同。問題是爲什麼這發生在SVG。

來源

2014-09-11 05:56:29

Angular with SVG圖形

回答

相關問題