我有一个包含10个对象的地图。每个对象都有10个属性val1，...，val10。现在，要检查地图中特定对象的特定属性是否已更改，我需要编写 $scope.$watch 100 次。如何监视整个地图/JS对象并确切地知道哪个属性已更改？
/*watch individual property*/
$scope.$watch('map[someid].val1', function(new_val, old_val)
{
//do something
});
/*watch entire object, how would this help me?*/
$scope.$watch('map', function(new_val, old_val)
{
//do something
}, true);
这个想法是提供一个观察函数，然后作为属性设置器的一部分来调用它：
function watcher(objectIndex, attributeName) {
console.log('map[' + objectIndex + '].' + attributeName + ' has changed');
}
Object.defineProperty有点像以复杂的方式为对象定义属性。因此，当您通常会编写以下代码时
obj.val1 = "foo";
你将编写
Object.defineProperty(obj, 'val1', {
get: function () { /* ... */ },
set: function (newValue) { /* ... */ },
// possible other parameters for defineProperty
})
比如说，当 obj.val1 被读取或写入时，您可以定义希望执行的操作。这使您有可能在 setter 的一部分中调用您的 watcher 函数：
Object.defineProperty(obj, 'val1', {
get: function () { /* ... */ },
set: function (newValue) {
// set the value somewhere; just don't use this.val1
/* call the */ watcher(/* with args, of course */)
}
})
目前在AngularJS中没有内置的方法来为您处理此操作。
您需要自己实现或查找可为您完成此操作的库。
如果您希望使用任何内置的监视器函数来自行实现，有以下三个选项：
1. $watch并将false作为第三个参数：比较引用相等性。在您的情况下不是一个选择。
2. $watchCollection：将浅层监视映射中的十个对象。在您的情况下也不是一个选择。
3. $watch并将true作为第三个参数：将使用angular.equals进行对象相等性比较。适用于您的用例。
以下是一个示例，它使用true作为第三个参数注册了整个映射的监视器，并手动执行了比较。
注意：根据您的应用程序（绑定和调用$digest的数量等），监视大型复杂对象可能会导致不良的内存和性能影响。由于此示例使用了另一个angular.copy（$watch至少会在内部使用一个），因此会对性能产生更大的影响。
$scope.map = {};
for (var i = 0; i < 3; i++) {
$scope.map[i] = {
property1: 'value1',
property2: 'value2',
property3: 'value3'
};
}
var source = [];
var updateSource = function(newSource) {
angular.copy(newSource, source);
};
updateSource($scope.map);
$scope.$watch("map", function(newMap, previousMap) {
if (newMap !== previousMap) {
for (var id in newMap) {
if (angular.equals(newMap[id], source[id])) continue;
var newObject = newMap[id];
var previousObject = source[id];
for (var property in newObject) {
if (!newObject.hasOwnProperty(property) ||
angular.equals(newObject[property], previousObject[property])) continue;
var cd = $scope.changeDetection = {};
cd.changedObjectId = id;
cd.previousObject = previousObject;
cd.newObject = newObject;
cd.changedProperty = property;
cd.previousPropertyValue = previousObject[property];
cd.newPropertyValue = newObject[property];
}
updateSource(newMap);
}
}
}, true);
$scope.$watchCollection(collection, function(newValue, oldValue) {
//do stuff when collection changes
});
http://docs.angularjs.org/api/ng/type/$rootScope.Scope
scope.$watch('map', function (newmap,oldmap) {
// detect what changed manually with your own recursive function
}, true);
这不会告诉你发生了什么变化，所以需要你自己进行处理。考虑直接将你的视图绑定到map上，并确保所有更改都在Angular $digest周期内发生，或者将其包装在$apply中，以便更轻松地解决问题。如果你的用例必须使用$watch，你还可以递归迭代对象并在其中设置单独的$watch。
$scope.$watch($scope.MyObjectToWatch, function(newValue, oldValue) {
// To only return the difference
var difference = diff(newValue, oldValue);
// To exclude certain properties from being evaluated (i.e. temporary/calculated/meta properties)
var difference = diff(newValue, oldValue, [newValue.prop1, newValue.prop2, newValue.prop3]);
if (Object.keys(difference).length == 0)
return; // Nothing has changed
else
doSomething(); // Something has changed
});
Object.keys(difference) 数组，您可以看到所有已更改的属性。
希望这能帮助到某些人。
now和then展平并形成字符串。从那时起，比较字符串并找到不匹配点就很简单了，这也是对象发生更改的点。不用说，所有对象属性应该被公开。
var flatten = function (key, obj) {
var ret = '';
$.each(obj, function (_key, val) {
if (typeof val == 'object') {
ret += flatten(key + '.' + _key, val);
} else {
ret += ((key ? key + '.' : '') + _key + ':' + val + ',');
}
});
return ret;
};
接下来可能是这样的：
$scope.$watch(obj, function (now, then) {
var nowFlat = flatten(now),
thenFlat = flatten(then);
compareStrings(nowFlat, thenFlat); // add custom string compare function here
}, true)
nowFlat缓存并在下次触发$watch时使用它作为thenFlat。