SVG具有角NG-重複genrated不rendeerd

Question

我想產生一些SVG元素槽角NG重複

我創建了一個指令，它們應該只是導入模板

這與代碼納克重複

<svg width="600" height="600" style="border:1px solid #000000;" > 
    <text x="10" y="10">Project Title</text>  
    <c-object-draggable ng-repeat="cObject in cObjects" ng-controller="cObjectCtrl"> 
    </c-object-draggable>  
</svg> 

這是我在我通過C-對象可拖動directiv裝載模板

<g transform="matrix(1,0,0,1,100,100)"> 
    <text x="1" y="1">ciao </text> 
    <circle cx="1" cy="1" r="20"></circle> 
</g> 

瀏覽器中的結果看起來不錯，我可以將它複製到其他文件中，並且它將被正確呈現。

<svg width="600" height="600" style="border:1px solid #000000;"> 
    <text x="10" y="10">Project Title</text> 
    <!-- ngRepeat: cObject in cObjects --> 
    <g transform="matrix(1,0,0,1,100,100)" ng-repeat="cObject in cObjects" ng-controller="cObjectCtrl"> 
     <text x="1" y="1">ciao </text> 
     <circle cx="1" cy="1" r="20"></circle> 
    </g> 
    <!-- end ngRepeat: cObject in cObjects --> 
    <g transform="matrix(1,0,0,1,100,100)" ng-repeat="cObject in cObjects" ng-controller="cObjectCtrl"> 
     <text x="1" y="1">ciao </text> 
     <circle cx="1" cy="1" r="20"></circle> 
    </g> 
    <!-- end ngRepeat: cObject in cObjects --> 
    <g transform="matrix(1,0,0,1,100,100)" ng-repeat="cObject in cObjects" ng-controller="cObjectCtrl"> 
    <text x="1" y="1">ciao </text> 
    <circle cx="1" cy="1" r="20"></circle> 
    </g> 
    <!-- end ngRepeat: cObject in cObjects -->   
</svg> 

在我的指令的ng-repeat之外生成的第一個文本對象被正確顯示。但其餘的都是隱形的。

它出現，如果我添加一個新的元素修改瀏覽器中的HTML所有呈現。 有沒有解決這個問題的建議？

Answer 1

在引擎蓋下AngularJS使用JQuery或JQLite從模板創建要替換的元素。

JQuery和JQLite都使用document.createElement而不是document.createElementNS和正確的SVG名稱空間。

在你的指令中，你需要接管來自AngularJS的SVG元素的創建。

你可以注入下面的輔助函數到你的指令：

.value('createSVGNode', function(name, element, settings) { 
    var namespace = 'http://www.w3.org/2000/svg'; 
    var node = document.createElementNS(namespace, name); 
    for (var attribute in settings) { 
    var value = settings[attribute]; 
    if (value !== null && !attribute.match(/\$/) && (typeof value !== 'string' || value !== '')) { 
     node.setAttribute(attribute, value); 
    } 
    } 
    return node; 
}) 

，並在鏈接功能，使用它，而不是使用模板（外部或內聯） - 是這樣的：

link: function(scope, element, attrs) { 
    var cx = '{{x}'; 
    var cy = '{{y}}'; 
    var r = '{{r}}'; 
    var circle = createSVGNode('circle', element, attrs); 

    angular.element(circle).attr('ng-attr-cx', cx); 
    angular.element(circle).attr('ng-attr-cy', cy); 
    angular.element(circle).attr('ng-attr-r', r); 
    element.replaceWith(circle); 

    $compile(circle)(scope); 
} 

你可以在https://github.com/mjgodfrey83/angular-piechart/上看到這個工作的例子 - 在一個餅圖上下文中。

一個修復程序着陸於角度1.3.0-beta8中，允許指定非html指令模板類型 - 請參閱here。有關正在使用的示例，請查看angular-charts。

希望有所幫助。