AngularJS - Richtlinie funktioniert nicht

Ich bin ein AngularJS newby. Ich versuche, ein Bild mit einer Vorlage einer AngularJS-Direktive anzuzeigen, und klicke auf das Bild, um eine Markierung auf dem Bild zu platzieren. Ich weiß nicht, warum es nicht funktioniert.AngularJS - Richtlinie funktioniert nicht

Die erste Richtlinie:

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

Der HTML-Code

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

Quelle

2013-03-04 agasthyan

eine jsfiddle wäre in diesem Fall nett – Dogoku

Sie vermissen die restrict : 'E' Option, die standardmäßig restrict hat den Wert AC das Attribut und die Klasse ist, in Ihrem Fall, dass Sie Verwenden der Richtlinie als Element.

Update: Basierend auf Kommentar

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

Demo: Fiddle

Quelle

2013-03-04 10:16:35

ok jetzt das Bild zeigt, aber der Klick ist immer noch nicht ausgelöst – agasthyan

Was ist der '# Marker', wo es sollte erscheinen –

http://jsfiddle.net/arunpjohny/6XneN/2/ –

Was @Arun sagte korrekt ist. Aber es ist nicht obligatorisch. Standardmäßig ist ur Direktive ein Attribut.

So Statt ur Richtlinie als Element der Verwendung

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

versuchen, es als ein Attribut, wie dies

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

Quelle

2013-03-04 10:23:23

es zeigt jetzt gut, aber der onclick wird nicht ausgelöst – agasthyan

wo verwenden Sie die ID "map" wo ist es? eine js fiddle wäre ein einfacher weg zu lösen ur pblm –

hier ist ein jsfiddle von @Arun http://jsfiddle.net/arunpjohny/6XneN/2/ – agasthyan

standardmäßig, wenn Sie eine Richtlinie in AngularJS machen. Wenn Sie die restricted-Eigenschaft ignorieren, nehmen Sie angularjs als Attribut an. als HTML zeigen sollten Sie Ihre Rückkehr Objekt als Gebrüll

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

und in Winkel das Element bereits ein jQuery-Objekt, selbst wenn Sie jquery nicht stimmen schreiben wird es seine eigene Implementierung Aufruf jQLite verwenden. Sie sollten daher nur

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

});

verwenden Ich hoffe, es working exmaple

Quelle

2013-03-04 10:40:47

Einige andere mögliche Probleme hilft:

Die Javascript-Datei Ihre Direktive enthält, wird nicht geladen. Dies kann passieren, wenn Sie Yeoman zum Generieren Ihrer Anweisung verwenden und Ihre index.html-Datei nicht geändert wird.
Sie verwenden einen camelCase Element-Namen in Ihrem HTML anstelle von Bindestrich. Wenn Ihre Anweisung widgetForm und restrict'E' oder 'A' heißt, sollten Sie <widget-form/>, nicht <widgetForm/> verwenden.

Quelle

2014-01-13 21:25:27

Die widgetForm vs widget-form hat mich. – Anthony

Danke! Einfacher Fehler für Anfänger. Kebab-Case vs CamelCase hat mich auch! –

Eine weitere: Starten Sie nicht den Namen Ihrer Direktive oder Attribute mit 'Daten'. Es gibt keine Fehlermeldung, aber es ist reserviert und wird nichts tun. –

Sie hängen Sie nicht "Richtlinie" an die erste String-Argument:

.directive("someDirective", someDirective)

Sollte dies für mich gewesen bin:

.directive("some", someDirective)

Zumindest sollte es, wenn Sie sein, möchte verwenden:

<some>stuff</some>

Suche nach Copy-Paste-Fehler ist schrecklich. Needing zu finden ist auch ...: '(

Quelle

2016-07-02 17:37:00 Jeroen

AngularJS - Richtlinie funktioniert nicht

Antwort

Verwandte Themen