Angular.js和Raphael.js / Snap.svg - Raphael.js生成的SVG内容的绑定指令事件处理程序

Question

我正在使用Angular.js指令中的Snap.svg来生成SVG内容，而且我现在正在考虑完全废弃Snap.svg并且只编写常规的'XML风格的SVG。我想，在我放弃Snap.svg之前，我至少应该问一下，使用Angular，是否可以将事件处理程序绑定到HTML Snap.svg生成。到目前为止，我没有看到将Snap生成的HTML与Angular指令中的element参数相关联的明确方法。另外，我认为无法直接向Snap.svg生成的标记添加指令。试图让两个人在一起玩得很好。 。 。哈克。

这里有什么我想念的吗？正如你在下面看到的，我明确地将元素变量设置为Snap.svg的输出（我很确定这是不正确的，但是，首先尝试允许元素变量映射到实际的HTML元素，变量默认关联，我想我会尝试不同的东西。）

BoothManager.directive("booth", ["$document", "BoothShapeConstants", function ($document, BoothShapeConstants) {
    return {
        restrict: "A",
        scope: {
          booth: "=info"
        },
        link: function (scope, element, attrs) {

            var s = Snap("#svg");

            var bigCircle  =  s.circle (20, 20, BoothShapeConstants.RADIUS).attr({
                fill: BoothShapeConstants.COLOR_FILL,
                stroke: BoothShapeConstants.COLOR_BORDER,
                strokeWidth: BoothShapeConstants.STROKE_WIDTH
            });


            bigCircle.drag(moveElement);


            function moveElement (dx, dy, posx, posy) {
                this.attr({
                cx: posx,
                cy: posy
            });
        };

        console.log(element);

        element.on("mousedown", function (event) {
            console.log(scope.booth.id); 
        });

        }
    }
}]);