在 Angular-Meteor 项目中使用 Raphael

Question

我有一个工作 raphael.js fiddle : http://jsfiddle.net/El4a/sbxjfafx/10/

现在，我需要在我的 angular-meteor 项目中创建 svg。我在几个地方需要它，所以它必须是抽象的。所以第一个问题是：我应该为此使用工厂还是指令？

我一直想把它变成一个工厂，但说实话，我不知道我在做什么。我没有任何错误，但图像没有显示。

这是工厂内部的 raphael 代码：

'use strict'; 
angular.module('timeAppApp').factory('svgFactory', function($rootScope){

Raphael.fn.pieChart = function (cx, cy, r, values) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }
    var bcolors = ['#d667cd','#3D8C1E','#00b9ff'];
    var colors = ['FF5DF4','#69F233', '#0080B0'];
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
            // color = "hsb(" + start + ", 1, .5)",
                color = colors[j%colors.length],
                ms = 500,
                delta = 30,
            //bcolor = "hsb(" + start + ", 1, 1)",
                bcolor = bcolors[j%bcolors.length],
                p = sector(cx, cy, r, angle, angle + angleplus, {gradient: "100-" + bcolor + "-" + color}),
                txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad));

            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (var i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};

Raphael.fn.circle = function(cx, cy, r){
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();

    var circle = paper.circle(280, 180, 175);
    circle.attr("fill", "white");
    circle.attr("stroke", "#fff");

    return chart;
};

var r;
    var svg = function (raphael) {
        $(function () {
            var values = [20, 60, 20];
            r = raphael("svg", 700, 700);
            r.pieChart(350, 350, 100, values, "#fff");
            r.circle(350, 350, 85).attr({ fill: 'white' });

        })
    };
svg(raphael);
return{r : r};

当我在浏览器中调试时，它显示所有的 raphael 函数都被跳过了。我不知道为什么。

控制台显示："ReferenceError: raphael is not defined"，但是当我看拉斐尔时，我得到了运行版本： "Raphael: Your browser supports SVG. You are running Raphaël 2.1.2"

所以我试图获取 ID 为 "svg" 的 div，并在其中绘制图像。这不会发生并且 div 保持为空。

我注入了新工厂

angular.module('timeAppApp')
.controller('ProjectDetailController', function($scope, $meteor, $state, $stateParams, svgFactory)

并尝试在匹配视图中绘制图像。 <div id="svg"></div>

我知道我可能做错了 127 件事，raphael/angular 狂热者在哭血，但我真的不知道是什么:(

作为附加条件，我还有点需要能够将 3 个值传递给工厂，而不是对它们进行硬编码。

在此先感谢您辛辛苦苦地度过这个烂摊子！

Answer 1

我不确定如何，但一切都成功了。我放弃了工厂的想法，并使用了指令。这没有任何问题。

在 Angular-Meteor 项目中使用 Raphael

Use Raphael in Angular-Meteor project

svg

factory

raphael

angularjs

angular-directive