因?yàn)閯倓偨佑| Angular,所以有些概念還很模糊,對(duì)于這個(gè)問(wèn)題嘗試通過(guò) Google 查找答案,但并未找到合適的解答,所以想在這里請(qǐng)教一下各位,這里是一個(gè)大概的代碼:
<p ng-repeat="item in list" class="need-another-js"></p>
<script>
$('.need-another-js').click(function(){
// do something
})
</script>
如果把 ng-repeat
去掉,JS 代碼的效果可以實(shí)現(xiàn),但是加上 ng-repeat
后,效果就不存在,這里是因?yàn)?Angular 作用域的問(wèn)題嗎?
這和作用域沒(méi)有半毛錢(qián)關(guān)系,純粹是一種典型的jquery
=> angular
的錯(cuò)誤表現(xiàn)形式。
AngularJS
的指令,作為一種“聲明式”的API,玩法和jquery
那套“命令式”API有很大區(qū)別,你在混著用的時(shí)候,很容易出錯(cuò)。
基本常識(shí)錯(cuò)誤,id
是用來(lái)表示元素唯一性的,可你用在了ng-repeat
上,也就是說(shuō)可能出現(xiàn)若干個(gè)元素的id
都是need-another-js
,這和jquery
、angular
都沒(méi)關(guān)系,純粹是html
知識(shí)上的缺失
ng-repeat
作為angular
提供的指令,需要經(jīng)過(guò)angular
的compile
、linking
過(guò)程,導(dǎo)致,當(dāng)你的$('#need-another-js').click
在為#need-another-js
元素注冊(cè)事件的時(shí)候,這個(gè)元素其實(shí)還沒(méi)有被angular
生成到DOM
中,這才是沒(méi)生效的關(guān)鍵。
單就你這個(gè)例子來(lái)講,可以做如下修改使之生效:
<p ng-repeat="item in list" class="need-another-js"></p>
不用
id
用class
<script>
$(document).on('click', '.need-another-js', function(){
// do something
});
</script>
雖然我不推薦這種寫(xiě)法,但你既然選擇了"命令式"和聲明式
API混用,想必有你的理由。
補(bǔ)充:
關(guān)于angular
是如何工作的,我想對(duì)于剛?cè)腴T(mén)的同學(xué),看看官網(wǎng)這個(gè)介紹很有幫助:
文檔地址: concepts
angular有它支持的綁定事件 ng-click
你可以嘗試一下這樣寫(xiě)
<p ng-repeat="item in list" ng-click="click()"></p>
<script>
//省略其他控制器的寫(xiě)法
$scope.click = function() {
//do something
}
</script>
我學(xué)angular的時(shí)候,直接就從jq換成angular了,jq能做的angular都能做
ng-repeat是動(dòng)態(tài)添加dom元素,你給動(dòng)態(tài)添加的元素用click方法綁定事件是不會(huì)觸發(fā)的。如果你喜歡用jquery,就用leftstick提出的方法,但建議使用mumofa提出的angular方法