I want to display an SVG image stored in a file and bind an angularJs ng-click function to the image.
I've tried putting the ng-click binding in the object/embed element tag as well as a wrapper div tag, but neither are working.
Does anyone know how to do this?
Attempted html:
<object ng-click="clickItem()" data="file.svg"></object>
<embed ng-click="clickItem()" src="file.svg/>
<div ng-click="clickItem()">
<object data="file.svg"></object>
</div>
<div ng-click="clickItem()">
<embed src="file.svg"/>
</div>
Resulting html after load:
<object ng-click="clickItem()" data="file.svg">
#document
xml-stylesheet
<svg ~svg contents....~></svg>
</object>
And the click does not register in any of the listed cases.
I want to display an SVG image stored in a file and bind an angularJs ng-click function to the image.
I've tried putting the ng-click binding in the object/embed element tag as well as a wrapper div tag, but neither are working.
Does anyone know how to do this?
Attempted html:
<object ng-click="clickItem()" data="file.svg"></object>
<embed ng-click="clickItem()" src="file.svg/>
<div ng-click="clickItem()">
<object data="file.svg"></object>
</div>
<div ng-click="clickItem()">
<embed src="file.svg"/>
</div>
Resulting html after load:
<object ng-click="clickItem()" data="file.svg">
#document
xml-stylesheet
<svg ~svg contents....~></svg>
</object>
And the click does not register in any of the listed cases.
Share Improve this question asked Nov 16, 2013 at 13:43 SpaajanenSpaajanen 3836 silver badges15 bronze badges2 Answers
Reset to default 10You can use SVG as regular images in all modern browsers (http://caniuse./svg-img).
<img ng-click="clickItem()" src="file.svg"/>
See it in action: http://jsfiddle/YJKnD/
I've manage to capture the click event with a little help of our friend ng-include.
Take a look at the code below:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script>
/**
* Module
*
* Description
*/
var myApp = angular.module('myApp', []);
myApp.directive('clickMe', function(){
// Runs during pile
return {
link: function($scope, element, iAttrs, controller) {
console.log(element);
element.bind('click', function(){
console.log('I\'ve just been clicked!');
})
}
};
});
</script>
</head>
<body>
<span ng-include="'circle1.svg'" click-me></span>
</body>
</html>