Question

我试图在我的页面上显示两次SVG（在指令内呈现），具有不同的值。 SVG指令位于ng-repeat中。

这是相关的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 :(相关的raphael）

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已创建，但为空。在浏览器中看起来像这样：

在这里你看到一个名为＆＃34; item9＆＃34;用2（！）SVG渲染它。再往下一点，我们发现：你可以在哪里看到名为＆＃34; item13＆＃34;的第二个div，但它是空的。

所以问题是：我需要做什么，在第二个div中进行第二个SVG渲染。

亲切的问候

Answer 1

您不必拥有模板，并引用字符串{{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作为孩子。

Angular：ng-repeat内的SVG指令渲染错误

1 个答案: