Question

我正在使用此代码：

        $scope.$watchCollection('[config.examId, config.pageType, config.createdBy, config.modifiedBy, config.reference]',
            function (newValue, oldValue) {
                if (typeof newValue !== 'undefined' && typeof oldValue !== 'undefined' && newValue !== oldValue) {
                    _u.putConfigs($scope.config);
                    //$scope.grid.data = null;
                };
             });

现在我必须在集合中添加更多项目。有没有办法可以整齐地将这些传播到多行？从我的理解（可能是错的）。 watchCollection必须是一个字符串。

Answer 1

如果您只是将整个集合视为空的建议，那么这就是您的选择。如果由于某种原因你无法做到，你也可以看到这样的个人价值观：

var toWatch = [
    'config.examId',
    'config.pageType',
    'config.createdBy',
    'config.modifiedBy',
    'config.reference'
];
toWatch.forEach(function (watchExpression) {
    $scope.$watch(watchExpression,
        function (newValue, oldValue) {
            if (typeof newValue !== 'undefined' && typeof oldValue !== 'undefined' && newValue !== oldValue) {
                _u.putConfigs($scope.config);
                //$scope.grid.data = null;
            }
        });
});

Answer 2

传递给watchCollection的第一个参数可以是表达式（字符串）或函数，它应该返回被监视的对象。将'[config.examId, config.pageType, /* ... */ ]'传递给$watchCollection会导致angular在每个摘要周期创建一个 new 数组。它有效，但它可能不是你想要的。

表达式

$scope.myArray = [ $scope.config.examId, $scope.config.pageType, /* ... */ ];
$scope.$watchCollection('myArray', function(newValue, oldValue) { 
  /* do magic */ 
});

功能

var myArray = [ $scope.config.examId, $scope.config.pageType, /* ... */ ];
$scope.$watchCollection(function() {
  // Edit: oops typo ... return array should have been;
  return myArray;
}, function(newValue, oldValue) { 
  /* do magic */ 
});

对象

请注意，您还可以观看对象而不是数组：

$scope.config = { /* your properties */ };

$scope.$watchCollection('config', function() { 
  /* do magic */ 
});

$scope.myProperty = 'this will fire the callback';

Answer 3

好吧，看起来你在配置对象中使用了简单的字段，你可以很容易地修改它以拥有多个监视（以这种方式可以更灵活）。即使你有复杂的物体，也可以使用深旗来观察它们：

var app = angular.module('app', []);
app.controller('ConfigCtrl', function($scope, $parse, $log) {
    $scope.config = {};

    // initial configuration
    $scope.watchProperties = ['examId', 'pageType', 'createdBy', 
                          'modifiedBy'];

    // dynamic modifications to the watched properties
    $scope.configureWatchProperties = function() {
        $scope.watchProperties.push('reference');
    }

    $scope.updateConfig = function() {
        // TODO: update config here
        $log.log('config updated:', $scope.config);
    }

    $scope.addWatchProperty = function(context, property, deep) {
        $scope.$watch(function() {
            return $parse(property)(context);
        }, function(newValue, oldValue) {
            if (newValue && newValue !== oldValue) {
                $scope.updateConfig();
            }
        }, deep);
    }

    $scope.configureWatch = function() {
        angular.forEach($scope.watchProperties, function(prop) {
            $scope.addWatchProperty($scope.config, prop);
        });
    }

    $scope.configureWatchProperties();
    $scope.configureWatch();
});

Complete JSFiddle Example:

是否有一种为AngularJS定义大型手表系列的整洁方法？

3 个答案:

表达式

功能

对象