17

私は AngularJS 初心者です。AngularJS ディレクティブのテンプレートを使用して画像を表示しようとしています。画像をクリックすると、画像にマーカーを配置する必要があります。なぜ機能しないのかわかりません。

最初のディレクティブ:

directive('hello', function() {
    return {
        template: '<img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  />',
        link: function(scope, element, attrs) {
            $('#map').click(
                function(e) {  
                    $('#marker').css('left', e.pageX).css('top', e.pageY).show();
                }
            );
         },
     };
});

htmlコード

 <hello>
    <img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" />   
 </hello>
4

5 に答える 5

38

その他の考えられる問題:

  • ディレクティブを含む Javascript ファイルが読み込まれていません。これは、Yeoman を使用してディレクティブを生成していて、index.html ファイルが変更されていない場合に発生する可能性があります。
  • ハイフンでつながれたの代わりに、HTML でcamelCase要素名を使用しています。ディレクティブが呼び出され、orである場合は、 ではなくを使用する必要があります。widgetFormrestrict'E''A'<widget-form/><widgetForm/>
于 2014-01-13T21:25:27.053 に答える
24

オプションがありませんrestrict : 'E'。デフォルトでrestrictは、属性とクラスの値ACがあります。この場合、ディレクティブを要素として使用しています。

更新：コメントに基づく

angular.module('test', []).directive('hello', function() {
    return {
        restrict : 'E',
        template : '<div style="position: relative"><img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  /><img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" /></div>',
        replace: true,
        link : function(scope, element, attrs) {
            $('#map').click(function(e) {
                        $('#marker').css('left', e.pageX).css('top', e.pageY)
                                .show();
                    });
        }
    };
});

デモ：フィドル

于 2013-03-04T10:16:35.573 に答える
2

angularjsでディレクティブを作成すると、デフォルトで。制限プロパティ angularjs を無視する場合は、それを属性と見なします。HTMLが示すように、返されるオブジェクトを次のように記述する必要があります

  <body ng-app="myApp">
    <hello>
      <div id="marker"></div>
    </hello>
  </body>

angularでは、jqueryを追加しなくても、要素はすでにjQueryオブジェクトであり、独自の実装呼び出しjQLiteを使用します。だからあなただけを使うべきです

var app = angular.module('myApp', []);

app.directive('hello',function(){
  var linkFn = function (scope,element,attrs){
      element.bind('click',function(e){
        $('#marker').css('left', e.pageX).css('top', e.pageY).show();
      });
  };
  return {
    restrict : "E",
    link: linkFn,
    transclude:true,
    template:'<div ng-transclude><img id="map" src="http://www.lonelyplanet.com/maps/asia/india/map_of_india.jpg"  /></div>'
  };

});

作業例に役立つことを願っています

于 2013-03-04T10:40:47.620 に答える
1

@Arunが言ったことは正しいです。ただし、必須ではありません。デフォルトでは、ur ディレクティブは属性になります。

したがって、要素として ur ディレクティブを使用する代わりに

<hello>
    <img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png"style="display: none; position: absolute;" />    
</hello>

このように、属性として試してください

<img id="marker" src="http://maps.google.com/mapfiles/ms/micons/blue.png" style="display: none; position: absolute;" hello />
于 2013-03-04T10:23:23.990 に答える
1

最初の文字列引数に "Directive" を追加しないでください:

.directive("someDirective", someDirective)

私にとってはこれだったはずです：

.directive("some", someDirective)

少なくとも、使用する場合は次のようにする必要があります。

<some>stuff</some>

コピー＆ペーストのエラーを見つけるのはひどいものです。1つを見つける必要も... :'(

于 2016-07-02T17:37:00.540 に答える