AngularJS 和 SVG——在 <rect> 元素上使用 ng-click？答案

【问题标题】：AngularJS and SVG--using ng-click on a <rect> element?AngularJS 和 SVG——在 <rect> 元素上使用 ng-click？
【发布时间】：2016-04-01 10:14:26
【问题描述】：

问题：当我单击 SVG 图形中的 <path> 元素时，我想运行 test 函数。现在，当我单击元素时没有任何反应。但是 - 当我用 onclick="alert('success')" 替换 ng-click 时，警报工作正常。有什么建议吗？

在我的代码中...

我的 html 部分...

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

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

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

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

（这里是完整的代码，有兴趣的人：https://github.com/cwklausing/angular_guitar）

【问题讨论】：

您在rect 元素和button 元素中添加了ng-click
@ARIFMAHMUDRANA，怎么了？
尝试直接插入 svg，而不是使用 embed
@Grundy 没问题，但我的问题是这两个元素都会是 ng-click 吗？
@ARIFMAHMUDRANA：button 只是一个测试，以确保角度没有问题。这对问题来说不是必需的。

标签： javascript html angularjs svg

【解决方案1】：

将其包装在 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>

这是工作的Plunker

【讨论】：

这个链接好像失效了。您没有在此链接中将rect 包装为svg。
@MoshFeu 它确实有效，您可以检查控制台并发出警报
@Sajeetharan：我的 rect 已经被包裹在一个 svg 中，我只是没有包含它。我的还是不行；但是，您的示例非常有启发性，因此我将对其进行更多检查，并希望找到答案。
@cwk.webdesign 如果您可以发布您的代码，可能会尽力提供帮助
@Sajeetharan - github 会工作吗？我会发布链接。