web-dev-qa-db-ja.com

AngularJS-ディレクティブが機能しない

私は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>
javascriptangularjsangularjs-directive
16
agasthyan

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();
                    });
        }
    };
});

デモ： フィドル

23
Arun P Johny

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

  • ディレクティブを含むJavaScriptファイルがロードされていません。これは、Yeomanを使用してディレクティブを生成していて、index.htmlファイルが変更されていない場合に発生する可能性があります。
  • ハイフネーションの代わりに、HTMLでcamelCase要素名を使用しています。ディレクティブがwidgetFormで、restrictが'E'または'A'の場合、<widget-form/>ではなく<widgetForm/>を使用する必要があります。
36
Sam Barnum

デフォルトでは、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>'
  };

});

それが役に立てば幸い working exmaple

2
Nur Rony

@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 />
1
JSAddict

最初の文字列引数に「ディレクティブ」を追加しないでください。

.directive("someDirective", someDirective)

私にとってこれであるはずです：

.directive("some", someDirective)

使用したい場合は、少なくともそうでなければなりません。

<some>stuff</some>

コピーと貼り付けのエラーを見つけることは恐ろしいことです。 1つを見つける必要があるのも... :(

0
Jeroen