AngularJS - dyrektywa nie działa

Jestem nowicjuszem AngularJS. Próbuję wyświetlić obraz przy użyciu szablonu dyrektywy AngularJS, a po kliknięciu obrazu chcę umieścić marker na obrazie. Nie wiem, dlaczego to nie działa.AngularJS - dyrektywa nie działa

Pierwsza dyrektywa:

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

Kod html

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

Źródło

2013-03-04 agasthyan

jsfiddle byłoby miło w tym przypadku – Dogoku

Brakuje opcji restrict : 'E' domyślnie restrict ma wartość AC która jest atrybutem i klasy, w przypadku, gdy są stosowanie dyrektywy jako elementu.

Aktualizacja: Na podstawie komentarza

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

Źródło

2013-03-04 10:16:35

ok teraz obraz pokazuje się, ale kliknięcie nie jest nadal wyzwalane – agasthyan

co to jest' # marker', gdzie powinien pojawia się –

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

Co powiedział @Arun jest poprawna. Ale nie jest to obowiązkowe. Domyślnie dyrektywa ur będzie atrybutem.

Więc Zamiast dyrektywy ur jako element

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

spróbować go jako atrybut, jak to

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

Źródło

2013-03-04 10:23:23

wyświetla się teraz dobrze, ale onclick nie jest wywoływany – agasthyan

gdzie używasz identyfikatora "map" gdzie to jest? js fiddle byłoby łatwym sposobem na rozwiązanie ur pblm –

tutaj jest jsfiddle przez @Arun http://jsfiddle.net/arunpjohny/6XneN/2/ – agasthyan

domyślnie po dokonaniu dyrektywy w angularjs. jeśli zignorujesz ograniczoną właściwość angularjs, przyjmij ją jako atrybut. jako html pokazując należy wpisać powracający obiekt jako mieszek

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

aw kątowy element jest już obiektem jQuery, nawet jeśli nie dodawać jQuery będzie używać własnego połączenia realizacja jQLite. więc należy użyć

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

});

tylko mam nadzieję, że to pomaga working exmaple

Źródło

2013-03-04 10:40:47

niektórych innych możliwych kwestii:

Plik JavaScript zawierające swoją dyrektywy nie jest załadowany. Może się tak zdarzyć, jeśli używasz narzędzia Yeoman do generowania dyrektywy, a plik index.html nie jest modyfikowany.
Używasz nazwy elementu camelCase w kodzie HTML zamiast z łącznikiem. Jeśli twoja dyrektywa nazywa się widgetForm i restrict jest 'E' lub 'A', powinieneś użyć <widget-form/>, a nie <widgetForm/>.

Źródło

2014-01-13 21:25:27

WidżetForm vs widget-form dostałem mnie. – Anthony

Dzięki! Łatwy błąd dla początkujących. Kebab-case vs camelCase też mnie dostał! –

Jeszcze jedno: nie zaczynaj nazwy dyrektywy ani atrybutów od 'danych'. Raportowanie błędów jest zerowe, ale jest zarezerwowane i nic nie da. –

Nie dołączyć "dyrektywę" na pierwszym argumencie:

.directive("someDirective", someDirective)

Jeżeli już to dla mnie:

.directive("some", someDirective)

przynajmniej powinno być, jeśli Ciebie chcesz użyć:

<some>stuff</some>

Znalezienie błędów kopiowania i wklejania jest okropne. Konieczność znalezienia jest zbyt ...: "(

Źródło

2016-07-02 17:37:00 Jeroen

AngularJS - dyrektywa nie działa

Odpowiedz

Powiązane problemy