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

Question

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

JS小提琴

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]);  
        }
    }
});