問(wèn)題描述

因?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)題嗎？

問(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

<p ng-repeat='item in list' id='need-another-js'></p><!--ng-repeat生成了一系列id為need-another-js的DOM元素，而DOM元素的ID是不能重復(fù)的--><script> $(’#need-another-js’).click(function(){//可能在ng-repeat還未執(zhí)行完成的時(shí)候便執(zhí)行了 //需在ng-repeat執(zhí)行完成時(shí)，設(shè)置onclick事件才有效// do something })</script>回答3：

angular有它支持的綁定事件 ng-click

你可以嘗試一下這樣寫(xiě)

<p ng-repeat='item in list' ng-click='click()'></p><script> //省略其他控制器的寫(xiě)法 $scope.click = function() { //do something }</script>回答4：

我學(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方法