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?

In my code...

section of my 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...

<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: )

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?

In my code...

section of my 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...

<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./cwklausing/angular_guitar)

• javascript
• html
• angularjs
• svg

Share Improve this question Follow edited Jan 3, 2016 at 8:19 Mr Lister 46.6k1515 gold badges113113 silver badges155155 bronze badges asked Dec 27, 2015 at 8:05 cron.dogcron.dog 18533 silver badges1010 bronze badges 6

• You added ng-click in rect element & button element – ARIF MAHMUD RANA Commented Dec 27, 2015 at 8:12
• @ARIFMAHMUDRANA, and what is wrong? – Grundy Commented Dec 27, 2015 at 8:13
• try insert svg directly, instead with using embed – Grundy Commented Dec 27, 2015 at 8:14
• @Grundy it's nothing wrong but my question is will it be ng-click in both element? – ARIF MAHMUD RANA Commented Dec 27, 2015 at 8:14
• 1 @ARIFMAHMUDRANA: The button is just a test to make sure there isn't a problem with the angular. It's non-essential to the problem. – cron.dog Commented Dec 27, 2015 at 8:16

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

Wrap it inside a 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