如何輕鬆確定$ scope中添加/刪除的內容。$ watch？

Question

我的任務是在Angular指令中包裝JQuery風格的UI組件。我完成了任務，但看起來相當難看。底層組件的API只有add和remove控制項目列表的方法。我能做的唯一事情就是觀察傳入我的指令的雙向綁定變量scope.$watchCollection，然後遍歷新舊參數以確定已添加或刪除的內容，然後調用添加/刪除API調用基礎組件。這有效，但我很好奇，如果有更好的方法來實現這一點。該代碼是可怕的和令人困惑的。

這裏是組件的演示最小的娛樂，在它的自然棲息地：

http://codepen.io/Chevex/pen/ofGeB?editors=101

你可以看到組件實例已在標記內的列表中的項目的元素。該組件然後返回一個API來添加/刪除單個項目。請注意，我無法控制實際應用程序中的底層組件，並且真實組件遠不止我的演示組件（可以輕鬆地用ng-repeat重寫）。

這裏是我的指令包裝的演示最小娛樂：

http://codepen.io/Chevex/pen/LDgCF?editors=101

這個偉大的工程，並模擬了雙向綁定變量，一個jQuery風格的組成部分，只有已經添加/刪除單個方法項目。我想知道在$watchCollection內是否有更好的方法來確定新的/刪除的項目。

// Watch items for changes. 
    scope.$watchCollection('items', function (newItemList, oldItemList) { 
    // Iterate over the newItemList and determine what items are new. 
    if (newItemList) { 
     newItemList.forEach(function (newItem) { 
     var addItem = true; 
     if (oldItemList) { 
      oldItemList.forEach(function (oldItem) { 
      if (newItem === oldItem) { 
       addItem = false; 
      }    
      }); 
     } 
     if (addItem) { 
      listApi.addItem(newItem); 
     } 
     }); 
    } 
    // Iterate over the oldItemList and determine what was removed. 
    if (oldItemList) { 
     oldItemList.forEach(function (oldItem, oldItemIndex) { 
     var removeItem = true; 
     if (newItemList) { 
      newItemList.forEach(function (newItem) { 
      if (oldItem === newItem) { 
       removeItem = false; 
      } 
      }); 
     } 
     if (removeItem) { 
      listApi.removeItem(oldItemIndex); 
     } 
     }); 
    } 
    }); 

所有這些只是爲了確定在集合發生變化時應該使用組件API添加或刪除什麼。這是最好的方法嗎？我問，因爲我一直在發現自己反覆寫了類似的邏輯，並想知道是否可能有更合適和/或更簡單的方法來做到這一點。

Answer 1

你可以使用這樣的事情：

Array.prototype.diff = function(arr) { 
    return this.filter(function(el) { return arr.indexOf(el) < 0; }); 
}; 

var addedItems = newItemList.diff(oldItemList); 
var removedItems = oldItemList.diff(newItemList);