将angularjs自定义类指令绑定到SVG元素

Question

我试图将angularjs自定义类指令绑定到SVG元素。以下的plunker说明了我的问题的核心：http://plnkr.co/edit/J4YafmSk6t7DScMRda4I?p=preview

如控制台日志所示，自定义类指令正确绑定到div元素（蓝色）。但单击rect元素（红色）时没有任何反应，表明没有发生绑定。

我想这必须与某些SVG细节相关 - 这个问题是否有任何已知的解决方法？在搜索时，我发现了与SVG元素的类插值相关的问题，但这不是问题......

感谢您提前寻求帮助！

Answer 1

如果将该指令声明为属性而不是CSS类，那么您可以使用该解决方案。

directive('class1', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind("click", function() {
                console.log("clicked");
            });
        }
    }
});

Plunker

我一直都遇到过CSS和SVG的问题，所以这并不让我感到惊讶，这只是另一件让人有点不可思议的事情。