AngularJS和SVG - 使用ng-click 元素？

Problem: I want to run the test function when I click on a <path> element in an SVG graphic. Right now nothing happens when I click the element. HOWEVER--when I replace ng-click with onclick="alert('success')" the alert works fine. Any suggestions?

问题:当我单击SVG图形中的元素时,我想运行测试功能。现在,当我点击元素时没有任何反应。但是 - 当我用onclick =“alert('success')替换ng-click时,警报工作正常。有什么建议么?

In my code...

在我的代码中......

section of my html...

我的HTML部分......

<div ng-controller="converter">
  <embed src="/image.svg">
  <!--This button successfully runs the test function-->
  <button ng-click="test()">Test</button>
</div>

my app.js...

var app = angular.module('app', []);

app.controller('converter', ['$scope', '$http', function($scope, $http){
    $scope.test = function(){
        console.log("this click event is working");
    }
}]);

part of my embedded SVG file...

我的嵌入式SVG文件的一部分......

<rect id="e1-1-2" data-name="e1-1" class="cls-35" x="14" y="106" width="57" height="22" ng-click="test()"/>

(Here's the full code, for those interested: https://github.com/cwklausing/angular_guitar)

(这是完整的代码,对于那些感兴趣的人:https://github.com/cwklausing/angular_guitar)

1 个解决方案

#1

Wrap it inside a svg

将它包裹在svg内

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" ng-click="test()" />
</svg>

Here is the working Plunker

这是工作的Plunker

#1