web-dev-qa-db-fra.com

AngularJS - directive ne fonctionne pas

Je suis un newby AngularJS. J'essaie d'afficher une image en utilisant un modèle de directive AngularJS et en cliquant sur l'image, je veux qu'un marqueur soit placé sur l'image. Je ne sais pas pourquoi cela ne fonctionne pas.

La première directive:

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

Le code 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

Vous manquez le restrict : 'E' option, par défaut restrict a la valeur AC qui est attribut et classe, dans votre cas vous utilisez la directive comme élément.

Mise à jour: basée sur un commentaire

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

Démo: Fiddle

23
Arun P Johny

Quelques autres problèmes possibles:

  • Le fichier Javascript contenant votre directive n'est pas en cours de chargement. Cela peut se produire si vous utilisez Yeoman pour générer votre directive et que votre fichier index.html n'est pas modifié.
  • Vous utilisez un nom d'élément camelCase dans votre code HTML au lieu de avec trait d'union. Si votre directive s'appelle widgetForm et restrict est 'E' ou 'A', Tu devrais utiliser <widget-form/> , ne pas <widgetForm/>.
36
Sam Barnum

Par défaut lorsque vous créez une directive dans angularjs. si vous ignorez la propriété restrict angularjs, supposez-la comme un attribut. comme votre html montrant, vous devez écrire votre objet de retour comme ci-dessous

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

et dans angular l'élément est déjà un objet jQuery même si vous n'ajoutez pas jquery, il utilisera son propre appel d'implémentation jQLite. vous ne devez donc utiliser que

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>'
  };

});

j'espère que cela aide exmaple de travail

2
Nur Rony

Ce que @Arun a dit est correct. Mais ce n'est pas obligatoire. Par défaut, la directive ur sera attribuée.

Donc, au lieu d'utiliser la directive ur comme élément

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

essayez-le comme un attribut, comme ça

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

N'ajoutez pas "Directive" au premier argument de chaîne:

.directive("someDirective", someDirective)

Ça aurait dû être ça pour moi:

.directive("some", someDirective)

Au moins, il devrait l'être, si vous souhaitez utiliser:

<some>stuff</some>

Trouver des erreurs de copier-coller est affreux. En avoir besoin, c'est aussi ...: '(

0
Jeroen