我的任务是在 Angular 指令中包装 JQuery 风格的 UI 组件。我已经完成了任务,但它看起来很难看。底层组件的 API 仅具有用于控制项目列表的 add
和 remove
方法。我唯一能想到做的就是使用 scope.$watchCollection
观察传递到我的指令中的双向绑定(bind)变量,然后迭代旧的和新的参数来确定添加或删除的内容,然后对底层组件调用添加/删除 API 调用。这可行,但我很好奇是否有更好的方法来实现这一点。代码丑陋且令人困惑。
这是该组件在其自然栖息地的最小娱乐演示:
http://codepen.io/Chevex/pen/ofGeB?editors=101
您可以看到组件在标记内具有列表中的项目的元素上实例化。然后,该组件返回一个 API 来添加/删除单个项目。请注意,我无法控制实际应用程序中的底层组件,并且真实组件的作用远远超过我的演示组件(可以轻松地使用 ng-repeat 重写)。
这是我的指令包装器的演示最小娱乐:
http://codepen.io/Chevex/pen/LDgCF?editors=101
这非常有效,并且使用 jquery 样式组件模拟双向绑定(bind)变量,该组件仅具有单个项目的添加/删除方法。我想知道是否有更好的方法来确定 $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);
关于javascript - 如何轻松确定 $scope.$watch 中添加/删除的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25649489/