可能的方法：

Question

我想在我的字符串drawChart()或我的对象chartTitle中的任何属性发生变化时调用函数chartOptions。

单独观看它们很容易：

$scope.$watch('chartTitle', drawChart);
$scope.$watchCollection('chartOptions', drawChart);

但是，我需要一种方法将它们合并为一个$watch语句（不添加chartTitle作为chartOptions的属性。

如何防止这两位观察者在同一摘要周期中开火。也就是说，如果我同时更改chartTitle和chartOptions上的属性，我怎样才能阻止drawChart被调用两次？

可能的方法：

对chartOptions和chartTitle进行深入观察。不幸的是chartOptions是一个非常大而复杂的对象，因此深入观察这些属性是不可行的。 是否可以限制深度？
在chartOptions观察者中检测在此摘要周期内chartTitle是否已更改，反之亦然。 这甚至可能吗？
找出一个监视表达式，捕获chartOptions和chartTitle上的所有属性。

Answer 1

你可以深入观察：

$scope.$watch(
    function() {
        return {
            chartTitle: $scope.chartTitle,
            chartOptions: $scope.chartOptions
        };
    },
    function(newval) {
        ...
    },
    true // deep watch
);

密切关注性能问题，它将在每个摘要周期创建一个对象。通常它没关系，但对于重量级的应用程序它可能。

Answer 2

将chartTitle和chartOptions合并为一个对象，然后对该对象执行$watchCollection。

$scope.$watchCollection(function() {
    // Make a shallow clone of all the properties in chartOptions
    var amalgam = {};
    for (var key in $scope.chartOptions) {
        var val = $scope.chartOptions[key];
        amalgam[key] = val;
    }

    // Add the chart title to our shallow clone
    amalgam.chartTitle = $scope.chartTitle;
    return amalgam;
}, drawChart);

请注意，这可能不是很快，因为您在每个摘要周期创建一个新对象。

如何防止观察者在同一个摘要周期中开火？

可能的方法：

2 个答案: