AngularJS - 指令不起作用

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

來源

2013-03-04 agasthyan

在這種情況下jsfiddle會很好 – Dogoku 2013-03-04 10:14:37

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

來源

2013-03-04 10:16:35

ok現在圖像顯示出來，但點擊仍然沒有觸發 – agasthyan 2013-03-04 10:19:20

什麼是＃標記，它應該在哪裏出現 – 2013-03-04 10:25:04

http://jsfiddle.net/arunpjohny/6XneN/2/ – 2013-03-04 10:26:57

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

來源

2013-03-04 10:23:23

它現在顯示很好，但onclick沒有觸發 – agasthyan 2013-03-04 10:25:38

你在哪裏使用ID「地圖」在哪裏呢？一個js小提琴將是一個簡單的方法來解決你的pblm – 2013-03-04 10:27:22

這裏是一個jsfiddle通過@Arun http://jsfiddle.net/arunpjohny/6XneN/2/ – agasthyan 2013-03-04 10:30:58

默認情況下，當您在angularjs一個指令。如果你忽略restrict屬性，angularjs會假定它是一個屬性。作爲你的HTML顯示你應該寫你的返回對象波紋管

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

和角度的元素已經是即使你不加的jQuery它會用它自己的實現通話jQLite一個jQuery對象。所以你應該只使用

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

來源

2013-03-04 10:40:47

一些其他可能的問題：

包含您的指令JavaScript文件沒有被加載。如果您使用Yeoman生成您的指令，並且您的index.html文件未被修改，則會發生這種情況。
您正在使用camelCase元素名稱在您的HTML中而不是連字符。如果您的指令被稱爲widgetForm和restrict是'E'或'A'，則應該使用<widget-form/>而不是<widgetForm/>。

來源

2014-01-13 21:25:27

widgetForm vs小部件形式讓我。 – Anthony 2014-12-03 20:15:46

謝謝！第一次犯錯容易。烤肉串案件與駱駝案件也讓我受益匪淺！ – 2017-08-07 09:44:28

還有一件事：不要用'data'開始你的指令或屬性的名字。沒有錯誤報告，但它是保留的並且什麼也不做。 – 2017-11-06 21:43:08

「指令」不要追加到第一個字符串參數：

.directive("someDirective", someDirective)

不該得到這個對我來說：

.directive("some", someDirective)

至少，它應該是，如果你想要使用：

<some>stuff</some>

查找複製粘貼錯誤是可怕的。 '（

來源

2016-07-02 17:37:00 Jeroen

AngularJS - 指令不起作用

回答

相關問題