Javascript 如何轻松确定';在$scope中添加/删除的。$watch?

Javascript 如何轻松确定';在$scope中添加/删除的。$watch?,javascript,jquery,angularjs,data-binding,angularjs-directive,Javascript,Jquery,Angularjs,Data Binding,Angularjs Directive,我的任务是在Angular指令中包装JQuery样式的UI组件。我已经完成了任务,但它看起来相当难看。底层组件的API只有用于控制项列表的add和remove方法。我能想到的唯一一件事就是观察通过scope.$watchCollection传递到指令中的双向绑定变量,然后迭代新旧参数以确定添加或删除了什么,然后调用底层组件上的add/remove API调用。这是可行的,但我很好奇是否有更好的方法来实现这一点。代码既可怕又令人困惑 以下是该组件在其自然栖息地中的最小娱乐演示: 您可以看到组件是

我的任务是在Angular指令中包装JQuery样式的UI组件。我已经完成了任务,但它看起来相当难看。底层组件的API只有用于控制项列表的
add
remove
方法。我能想到的唯一一件事就是观察通过
scope.$watchCollection
传递到指令中的双向绑定变量,然后迭代新旧参数以确定添加或删除了什么,然后调用底层组件上的add/remove API调用。这是可行的,但我很好奇是否有更好的方法来实现这一点。代码既可怕又令人困惑

以下是该组件在其自然栖息地中的最小娱乐演示:

您可以看到组件是在标记中包含列表中的项目的元素上实例化的。然后,该组件返回一个API来添加/删除单个项。请注意,在我们的实际应用程序中,我无法控制底层组件,而真正的组件远比我的演示组件(可以很容易地用ng repeat重新编写)做得更多

下面是我的指令包装器的演示:

这非常有效,它使用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添加或删除哪些内容。这是最好的方式吗?我之所以这么问,是因为我发现自己一直在反复编写类似的逻辑,并想知道是否有更合适和/或更简单的方法来实现它。

您可以使用以下内容:

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);
Array.prototype.diff=函数(arr){
返回this.filter(函数(el){return arr.indexOf(el)<0;});
};
var addedItems=newItemList.diff(oldItemList);
var removedItems=oldItemList.diff(newItemList);

简洁优雅。即使性能没有任何提高,至少代码要简单得多。非常感谢。