AngularJS：如何將ng-click綁定到使用embed或object元素插入的SVG圖像

Question

我想顯示存儲在文件中的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>

加載后得到的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/

Answer 2

我已經設法在我們的朋友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>

AngularJS：如何將ng-click綁定到使用embed或object元素插入的SVG圖像

問題描述

2 個解決方案

解決方案1
10 2013-11-16 16:58:00

解決方案2
3 已采納 2013-11-16 16:58:03

AngularJS：如何將ng-click綁定到使用embed或object元素插入的SVG圖像

問題描述

2 個解決方案

解決方案1 10 2013-11-16 16:58:00

解決方案2 3 已采納 2013-11-16 16:58:03

解決方案1
10 2013-11-16 16:58:00

解決方案2
3 已采納 2013-11-16 16:58:03