角：NG-重複內SVG渲染指令錯誤

我試圖顯示SVG（一個指令內渲染）我的網頁兩次，使用不同的值。 SVG指令位於ng-repeat內。角：NG-重複內SVG渲染指令錯誤

這是相關的HTML：

<div ng-repeat="sprint in project.sprintinfo" 
...//other repeat stuff 
     <div class="col-xs-4"> 
      <circlesvg 
         percentages="sprint.percentages" 
         total="sprint.total" 
         colors="['#d667cd','#3c5d9b','#5acd2d']" 
         size="80" 
         id="sprint.id"> 
      </circlesvg> 
     </div> 
</div>

然後我用raphael.js在我的指令：（相關拉斐爾）

angular.module('timeAppApp') 
.directive('circlesvg', [function() { 

    return { 
     restrict: 'E', 
     scope: { 
      percentages: '=', 
      total: '=', 
      colors : '=', 
      //lineair : '=', 
      size: '=', 
      id: '=' 
     }, 
     template: '<div id="{{id}}"></div>', //dynamically bind id to the template 
     link: function (scope, el, attrs) { 
     // function draw() { 

      scope.id = 'item' + scope.id++; //change id for next drawing round 

       ...//code to draw my SVG 

        (function (raphael) { 

        var size = scope.size; 
        var values = scope.percentages; 
        if(typeof(values)=="undefined") { 
         console.log("nothing to draw here."); 
         return; 
        } 

        var r = raphael("{{id}}", size, size); //get id for raphael to draw his SVG 
        var s = size/2; 
        r.pieChart(s, s, s, values, "#fff"); 
        var c = s - (s * 0.15); 
        r.circle(s, s, c).attr({fill: 'white'}); 
        var text = scope.total; 
        r.text(s, s, text).attr({'font-size': 25}); 


       })(Raphael.ninja());

現在的問題是：這兩個SVG的被抽出，用相應的正確值，但它們都是在第一個div內繪製的。

將創建第二個div，而空。這看起來像這樣在瀏覽器中：

在這裏你會看到一個名爲「item9」的div，其中呈現了2（！）SVG。阿位進一步下跌，我們發現：在這裏你可以看到一個名爲「item13」的第二個div，但裏面是空的。

所以，問題是：什麼，我需要做的，使第二SVG第二格內呈現。

親切的問候

來源

2015-10-15 Ayamei

你不必有一個模板，並引用字符串{{id}}給你意想不到的效果。我只會使用由Angular創建的DOM元素作爲指令。

 link: function (scope, el, attrs) { 
      el[0].setAttribute('id','item' + scope.id++); 

      (function (raphael) { 
        var r = raphael(el[0], size, size); 
      })(Raphael.ninja());

上面應該添加一個屬性ID到circlesvg並創建一個SVG作爲一個孩子。

來源

2015-10-15 14:35:03 cgTag

我知道你不應該說謝謝，但仍然...謝謝！：D我仍然不知道爲什麼我的代碼不起作用，但這種方式就像一種魅力。我不知道模板是可選的。感謝您的信息和幫助。 – Ayamei

角：NG-重複內SVG渲染指令錯誤

回答

相關問題