2013-03-04 113 views
15

我是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> 
+0

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

回答

22

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

+0

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

+0

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

+0

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

1

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

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

+0

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

+0

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

2

默認情況下,當您在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

34

一些其他可能的問題:

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

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

+0

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

+0

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

0

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

.directive("someDirective", someDirective) 

不該得到這個對我來說:

.directive("some", someDirective) 

至少,它應該是,如果你想要使用:

<some>stuff</some> 

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