Question

我正在尝试使用Raphael创建一个自定义角度指令来创建饼图。但是，我似乎无法让SVG正确显示（它似乎堆叠在一起（位置：绝对;顶部：0）。但是，当我为每个指令创建Raphael对象时，我使用了模板中的div但是SVG似乎没有嵌入div中。我尝试过“替换：true”，但它似乎也没有用。有人知道如何解决这个问题吗？

JS Fiddle

app.directive('piechart', function() {
    return {
        restrict: 'E',
        scope: {
            dset: '='
        },
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var r = Raphael(element.children(0));
            r.piechart(100, 100, 100, [scope.dset.male, scope.dset.female]);            
        }
    }
});

Answer 1

我用

Raphael(element[0])

而不是

Raphael(element.children(0))

和模板选项不是必需的

像这样。

app.directive('piechart', function() {
    return {
        restrict: 'E',
        scope: {
            dset: '='
        },
        link: function(scope, element, attrs) {
            var r = Raphael(element[0]);
            r.piechart(100, 100, 100, [scope.dset.male, scope.dset.female]);  
        }
    }
});

Answer 2

app.directive('piechart', function() {
return {
    restrict: 'E',
    scope: {
        dset: '='
    },
    template: '<div id="chart"></div>',
    link: function(scope, element, attrs) {
        var r = Raphael("chart");
        r.piechart(100, 100, 100, [scope.dset.male, scope.dset.female]);            
    }
}});

使用Raphael创建自定义角度指令的问题

2 个答案: