javascript – AngularJS:如何绑定点击到使用嵌入或对象元素插入的SVG图像

前端之家收集整理的这篇文章主要介绍了javascript – AngularJS:如何绑定点击到使用嵌入或对象元素插入的SVG图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想显示存储在文件中的SVG图像,并将angleJsng点击功能绑定到图像.

我已经尝试将ng-click绑定到对象/ embed元素标签以及包装器div标签中,但两者都不起作用.

有谁知道如何做到这一点?

尝试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>

加载后产生的HTML:

<object ng-click="clickItem()" data="file.svg">
    #document
    xml-stylesheet
    <svg ~svg contents....~></svg>
</object>

并且点击不会在任何列出的情况下注册.

解决方法

我已经设法通过我们的朋友的帮助来捕获点击事件.
看看下面的代码
<!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>

猜你在找的JavaScript相关文章