AngularJS und SVG - mit ng-Klick auf ein <rect> Element?

Question

Problem: Ich möchte die test Funktion ausführen, wenn ich auf ein <path> Element in einer SVG-Grafik klicken. Im Moment passiert nichts, wenn ich auf das Element klicke. JEDOCH - wenn ich ng-click durch onclick="alert('success')" ersetze, funktioniert die Warnung gut. Irgendwelche Vorschläge?

In meinem Code ...

Abschnitt meiner html ...

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

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

Teil meiner eingebetteten SVG-Datei .. .

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

(Hier ist der vollständige Code, f oder Interessenten: https://github.com/cwklausing/angular_guitar)

Answer 1

Wickeln Sie es in einem 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> 

Hier ist die Arbeits Plunker