问题通过创建自定义的拉斐尔角指令 [英] Problems creating custom angular directive using Raphael

问题描述

我想创建一个自定义的角度指令来创建一个使用拉斐尔饼图。但是，我似乎遇到麻烦SVGs正常显示（这似乎是堆放在彼此（位置之上：绝对的;顶部：0）然而，当我创造了拉斐尔对象的每个指令，我用了在模板中的div但SVG似乎并不嵌入在专区内我已经试过取代：真正的。？但它似乎没有任何工作没有人知道如何解决这个

JS小提琴

  app.directive（饼图，函数（）{
    返回{
        限制：'E'，
        范围： {
            DSET：'='
        }，
        模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
        链接：功能（范围，元素，ATTRS）{
            变种R =圣拉斐尔（element.children（0））;
            r.piechart（100，100，100，[scope.dset.male，scope.dset.female]）;
        }
    }
}）;
 

解决方案

我用

 拉斐尔（元素[0]）
 

而不是

 拉斐尔（element.children（0））
 

和模板选项是没有必要的。

这样的。

  app.directive（饼图，函数（）{
    返回{
        限制：'E'，
        范围： {
            DSET：'='
        }，
        链接：功能（范围，元素，ATTRS）{
            变种R =圣拉斐尔（元素[0]）;
            r.piechart（100，100，100，[scope.dset.male，scope.dset.female]）;
        }
    }
}）;
 

I'm trying to create a custom angular directive to create pie charts using Raphael. However, I seem to be having trouble getting the SVGs to appear correctly (it seems to be stacking on top of each other (position: absolute; top: 0). However, when I created the Raphael object for each directive, I used the div within the template but the SVG doesn't seem embedded within the div. I've tried "replace: true" but it doesn't seem to work either. Does anyone know how to solve this?

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

解决方案

I use

Raphael(element[0])

instead

Raphael(element.children(0))

and template option is not necessary

like this.

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

这篇关于问题通过创建自定义的拉斐尔角指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！