Javascript AngularJS：如何将ng单击绑定到使用嵌入或对象元素插入的SVG图像_Javascript_Html_Angularjs_Svg_Documentfragment

Javascript AngularJS：如何将ng单击绑定到使用嵌入或对象元素插入的SVG图像

javascript html angularjs svg

Javascript AngularJS：如何将ng单击绑定到使用嵌入或对象元素插入的SVG图像,javascript,html,angularjs,svg,documentfragment,Javascript,Html,Angularjs,Svg,Documentfragment,我想显示存储在文件中的SVG图像，并将angularJs ng click函数绑定到该图像我已经尝试将ng click绑定放在object/embed元素标记和包装器div标记中，但两者都不起作用有人知道怎么做吗尝试的html： <object ng-click="clickItem()" data="file.svg"></object> <embed ng-click="clickItem()" src="file.svg/> <div n

我想显示存储在文件中的SVG图像，并将angularJs ng click函数绑定到该图像

我已经尝试将ng click绑定放在object/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>


您可以在所有现代浏览器中使用SVG作为常规图像（）


在行动中查看它：
我在朋友的帮助下成功捕获了点击事件ng include。
请看下面的代码：
 <!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>


文件
/**
*模块
*
*描述
*/
var myApp=angular.module（'myApp'，[]）；
myApp.directive（'clickMe'，function（）{
//在编译期间运行
返回{
链接：功能（$scope，element，iAttrs，controller）{
控制台日志（元素）；
元素绑定（'单击'，函数（）{
log（'我刚刚被点击！'）；
})
}
};
});
虽然这样做有效，但您失去了使用css设置svg样式的能力。好吧，没有提到这个要求：）我最终做了类似的事情，但为了访问样式设置和单击功能，我将svg数据放在新的html部分文件中，并使用hg include将该文件包括在内。
<img ng-click="clickItem()" src="file.svg"/>

 <!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>