角：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渲染指令错误

回答

相关问题