Login/Register
AngularJS: How to bind ng-click to an SVG image inserted using embed or object element
Asked Answered
Solved javascripthtmlangularjssvgdocumentfragment
V

2

10

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.

Vip answered 16/11, 2013 at 13:43 Comment(0)
V
3

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.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>

<script>
/**
*  Module
*
* Description
*/
var myApp = angular.module('myApp', []);

myApp.directive('clickMe', function(){
    // Runs during compile
    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>
Vaulted answered 16/11, 2013 at 16:58 Comment(1)
I ended up doing something like this, but in order to access both styling and the click function, I put the svg data in new html partial files and include THAT file in using hg-include. – Vip
N
10

You can use SVG as regular images in all modern browsers (http://caniuse.com/svg-img).

<img ng-click="clickItem()" src="file.svg"/>

See it in action: http://jsfiddle.net/YJKnD/

Nitrobenzene answered 16/11, 2013 at 16:58 Comment(2)
Although this works, you lose the ability to style the svg using css. – Vip
Well, this requirement wasn't mentioned :) – Nitrobenzene
V
3

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.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>

<script>
/**
*  Module
*
* Description
*/
var myApp = angular.module('myApp', []);

myApp.directive('clickMe', function(){
    // Runs during compile
    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>
Vaulted answered 16/11, 2013 at 16:58 Comment(1)
I ended up doing something like this, but in order to access both styling and the click function, I put the svg data in new html partial files and include THAT file in using hg-include. – Vip

© 2022 - 2024 — McMap. All rights reserved.