AngularJS - 指令不起作用

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

演示:小提琴