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>

ОТВЕТЫ

Ответ 1

Вам не указан параметр 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();
                    });
        }
    };
});

Демо: Fiddle

Ответ 2

Некоторые другие возможные проблемы:

  • Файл Javascript, содержащий вашу директиву, не загружается. Это может произойти, если вы используете Yeoman для генерации вашей директивы, и ваш файл index.html не изменяется.
  • Вы используете имя элемента camelCase в своем HTML вместо дефиса. Если ваша директива называется widgetForm и restrict равна 'E' или 'A', вы должны использовать <widget-form/>, а не <widgetForm/>.

Ответ 3

По умолчанию, когда вы делаете директиву в angularjs. если вы игнорируете ограничение свойства angularjs, предположите его как атрибут. как показано на вашем html, вы должны написать возвращаемый объект ниже:

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

а в angular элемент уже является объектом jQuery, даже если вы не добавляете jquery, он будет использовать свой собственный вызов jclite для реализации. поэтому вы должны использовать

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

Ответ 4

Что @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 />

Ответ 5

Не добавляйте "директиву" к первому аргументу строки:

.directive("someDirective", someDirective)

Должно быть это для меня:

.directive("some", someDirective)

По крайней мере, это должно быть, если вы хотите использовать:

<some>stuff</some>

Поиск ошибок копирования-вставки ужасно. Нужно найти его тоже...: '(