javascript - AngularJS:如何将 ng-click 绑定(bind)到使用嵌入或对象元素插入的 SVG 图像

Question

我想显示存储在文件中的 SVG 图像并将 angularJs ng-click 函数绑定(bind)到图像。

我已经尝试将 ng-click 绑定(bind)放在对象/嵌入元素标记以及包装器 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>

并且在列出的任何情况下都没有注册点击。

Answer 1

您可以在所有现代浏览器中将 SVG 用作常规图像 (http://caniuse.com/svg-img)。

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

查看实际效果:http://jsfiddle.net/YJKnD/