當我在svg中使用AngularJS指令時，結果不出現

我正在嘗試創建AngularJS指令，我將在svg元素中使用它。
該指令不會創建svg元素，而是使用存在的元素。我可以在開發工具中看到正確的svg標記，但瀏覽器不顯示它。當我在svg中使用AngularJS指令時，結果不出現

這是指令：

angular.module('ui.directives', []).directive('svgText', 
    function() { 
     return { 
     restrict: 'E', 
      replace: true, 
      template: '<text fill="green" x="4" y="20" font-weight="bolder" font-size="2" font-family="Arial">89</text>' 
     }; 
    } 
);

來源

2013-11-04 Ido Ran

可能重複（http://stackoverflow.com/questions/13641105/including-svg-template-in-angularjs-directive） –

這是因爲jQuery的（這AngularJS罩下使用）不知道如何創建SVG元素。您可以通過將鏈接函數添加到克隆創建的元素但在SVG名稱空間中創建元素的指令來解決此問題。

一個潛在的更好的方法是來包裝你模板的SVG元素（定義的命名空間），然後在鏈接功能拉出子元素，並使用，它會已經在正確的命名空間創建。

module.directive(
    'svgText', 
    function() { 
     return { 
      restrict: 'E', 
      template: '<svg xmlns="http://www.w3.org/2000/svg"><text fill="green" x="4" y="20" font-weight="bolder" font-size="2" font-family="Arial">89</text></svg>', 
      replace: true, 

      link: function (scope, elem, attrs) { 
       // Extract the child element to replace the SVG element. 
       var child = angular.element(elem[0].firstElementChild); 

       // Copy attributes into element. 
       for (attrName in attrs) { 
        if(typeof attrs[attrName] === "string") { 
         child.attr(attrName, attrs[attrName]); 
        } 
       } 
       elem.replaceWith(child); 
      } 
     }; 
    } 
);

我發表了一篇關於AngularJS + SVG的文章，這篇文章講述了很多這樣的問題。 [包括Angularjs指令SVG模板]的

http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

來源

2014-01-19 07:08:19

非常感謝這個，對我來說，我無法理解這個問題。這應該在AngularJS文檔中提到。 –

注意：這也適用於引用常規svg文件的'templateUrl：'。 svg文件也可以包含角度指令，甚至ng-transclude。做得好！ –

當我在svg中使用AngularJS指令時，結果不出現

回答

相關問題