Question

我是AngularJS newby。我正在尝试使用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>

Answer 1

其他一些可能的问题：

未加载包含您的指令的Javascript文件。如果您使用Yeoman生成指令，并且未修改index.html文件，则会发生这种情况。
您在HTML中使用 camelCase 元素名称而不是连字符。如果您的指令被称为widgetForm且restrict为'E'或'A'，则应使用<widget-form/>，而不是<widgetForm/>。

Answer 2

您缺少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

Answer 3

默认情况下，您在angularjs中创建指令。如果忽略restrict属性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

Answer 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 />

Answer 5

不要将“Directive”附加到第一个字符串参数：

.directive("someDirective", someDirective)

对我来说应该是这样的：

.directive("some", someDirective)

至少，它应该是，如果你想使用：

<some>stuff</some>

查找复制粘贴错误非常糟糕。需要找到一个也是......：'（

AngularJS - 指令不起作用

5 个答案: