10

ファイルに保存されている SVG 画像を表示し、angularJs ng-click 関数を画像にバインドしたいと考えています。

オブジェクト/埋め込み要素タグとラッパー div タグに ng-click バインディングを配置しようとしましたが、どちらも機能していません。

誰もこれを行う方法を知っていますか?

試みた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>

また、クリックは、リストされているケースのいずれにも登録されません。

4

2 に答える 2

10

最新のすべてのブラウザで SVG を通常の画像として使用できます ( http://caniuse.com/svg-img )。

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

実際に見てみましょう: http://jsfiddle.net/YJKnD/

于 2013-11-16T16:58:00.173 に答える
3

友人の助けを借りて、クリック イベントをキャプチャすることができました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>
于 2013-11-16T16:58:03.440 に答える