發(fā)現(xiàn)問(wèn)題

最近有客戶投訴，說(shuō)在刪除指定的某條記錄時(shí),結(jié)果刪掉的卻是另外一條記錄！看起來(lái)是個(gè)很嚴(yán)重的BUG。 有一次我們?cè)诠ぷ髦信龅搅诉@個(gè)問(wèn)題。 要定位這個(gè)BUG非常麻煩, 因?yàn)榭蛻粢膊磺宄绾沃噩F(xiàn)這個(gè)問(wèn)題。

后來(lái)發(fā)現(xiàn)這個(gè)Bug是由于在 ng-repeat 中使用了 $index 引發(fā)的。

一個(gè)簡(jiǎn)單動(dòng)作(action)的列表

先來(lái)看看一個(gè)完整有效的ng-repeat示例。

<ul ng-controller="ListCtrl">
 <li ng-repeat="item in items">
 {{item.name}}
 <button ng-click="remove($index)">remove</button>
 </li>
</ul>

對(duì)應(yīng)的控制器(controller)如下:

app.controller('ListCtrl', ['$scope', function($scope) {
 //items come from somewhere, from where doesn't matter for this example
 $scope.items = getItems();

 $scope.remove = function(index) {
 var item = $scope.items[index];
 removeItem(item);
 };
}]);

看起來(lái)沒(méi)什么問(wèn)題,對(duì)嗎? 這段代碼也沒(méi)有任何特別值得注意的。

添加一個(gè)過(guò)濾器(filter)

然后,讓我們來(lái)做一個(gè)小小的修改: 給列表添加一個(gè)過(guò)濾器。 這是很常見(jiàn)的做法,如果列表很長(zhǎng)的話,例如允許用戶進(jìn)行搜索。

為了方便起見(jiàn), 假設(shè)我們通過(guò) searchFilter 來(lái)查詢列表中的記錄。

<ul ng-controller="ListCtrl">
 <li ng-repeat="item in items | searchFilter">
 {{item.name}}
 <button ng-click="remove($index)">remove</button>
 </li>
</ul>

控制器的代碼保持不變。 看起來(lái)仍然沒(méi)有問(wèn)題,是吧?

事實(shí)上,有一個(gè)bug藏在里面。 如果我不說(shuō), 你能找到嗎? 如果能找到,你就已經(jīng)是Angular大牛了.

請(qǐng)盡量不要使用 $index

BUG其實(shí)是在控制器里面:

$scope.remove = function(index) {
 var item = $scope.items[index];
 removeItem(item);
};

這里使用了 index參數(shù), 然后就遇到了BUG: 過(guò)濾后的索引(indexs)不匹配原始列表的索引。

幸運(yùn)的是,有一個(gè)很簡(jiǎn)單的方法來(lái)避免這種問(wèn)題: 不要使用$index,而改成實(shí)際的item對(duì)象。

<ul ng-controller="ListCtrl">
 <li ng-repeat="item in items | searchFilter">
 {{item.name}}
 <button ng-click="remove(item)">remove</button>
 </li>
</ul>

控制器如下所示:

$scope.remove = function(item) {
 removeItem(item);
};

注意, 這里將 remove($index) 改成 remove(item) , 并修改了 $scope.remove 函數(shù)來(lái)直接操作傳過(guò)來(lái)的對(duì)象。

這個(gè)小小的修改就完全避免了剛才的BUG。

為了更好地說(shuō)明問(wèn)題以及解決方案,請(qǐng)參考 interactive example 。

從中可以學(xué)到什么?

      第一個(gè)教訓(xùn)當(dāng)然是在使用 $index 要小心一點(diǎn),因?yàn)橐阅承┓绞绞褂脮r(shí)很可能會(huì)產(chǎn)生BUG。

      第二個(gè)教訓(xùn)是,請(qǐng)記住類似這樣的模式,則可以用更好的做事方式,可以完全避免某些類型的BUG。 我強(qiáng)烈建議大家現(xiàn)在不要使用 $index, 從這種簡(jiǎn)單的思維轉(zhuǎn)變中,就可以減少代碼中的很多BUG。

      第三個(gè)教訓(xùn)是測(cè)試并不是什么時(shí)候都有用。 即便有自動(dòng)化測(cè)試,也覆蓋了足夠多的情形, 但對(duì)于依賴特定輸入的情況,也很容易錯(cuò)過(guò)某些BUG。 錯(cuò)誤本身并不是每次都會(huì)出現(xiàn),即使你也用過(guò)濾來(lái)測(cè)試。

      第四個(gè)教訓(xùn)是不要破壞抽象 —— 這一點(diǎn)很容易被忽略。理論上 $index 是由 ng-repeat 創(chuàng)建的一個(gè) “模板變量(template variable)”。 這只在 repeat 塊里面有意義(并正確起作用)。 當(dāng)我們將它的值傳遞到外面時(shí),它就失去了上下文從而不再有效。 如果確實(shí)想讓它在 repeat 之外依然有效,則必須在控制器中也進(jìn)行過(guò)濾,這就需要一些不是很必要的重復(fù)代碼。 值得慶幸的是本文中介紹的模式可以用來(lái)避免這種情況。

結(jié)束語(yǔ)

以上就是關(guān)于AngularJS實(shí)踐之ng-repeat中$index使用注意事項(xiàng)的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。

原文鏈接: AngularJS best practices: Be careful when using ng-repeat's $index

原文日期: 2014-11-10

翻譯日期: 2015-01-23

翻譯人員: 鐵錨 http://blog.csdn.net/renfufei

最新評(píng)論