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

最近有客戶投訴，說在刪除指定的某條記錄時(shí),結(jié)果刪掉的卻是另外一條記錄！看起來是個(gè)很嚴(yán)重的BUG。 有一次我們在工作中碰到了這個(gè)問題。 要定位這個(gè)BUG非常麻煩, 因?yàn)榭蛻粢膊磺宄绾沃噩F(xiàn)這個(gè)問題。

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

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

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

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

對應(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);
 };
}]);

看起來沒什么問題,對嗎? 這段代碼也沒有任何特別值得注意的。

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

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

為了方便起見, 假設(shè)我們通過 searchFilter 來查詢列表中的記錄。

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

控制器的代碼保持不變。 看起來仍然沒有問題,是吧?

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

請盡量不要使用 $index

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

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

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

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

<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ù)來直接操作傳過來的對象。

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

為了更好地說明問題以及解決方案,請參考 interactive example 。

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

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

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

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

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

結(jié)束語

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

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

原文日期: 2014-11-10

翻譯日期: 2015-01-23

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

最新評論