Question

如何在Angular中$scope.$watch多个变量，并在其中一个变化时触发回调。

$scope.name = ...
$scope.age = ...
$scope.$watch('???',function(){
    //called when name or age changed
})

Answer 1

<强>更新

Angular现在提供两种范围方法$watchGroup（自1.3起）和$watchCollection。 @blazemonger和@kargold已经提到过这些。

这应该独立于类型和值而工作：

$scope.$watch('[age,name]', function () { ... }, true);

在这种情况下，您必须将第三个参数设置为true。

字符串连接'age + name'将在以下情况下失败：

<button ng-init="age=42;name='foo'" ng-click="age=4;name='2foo'">click</button>

在用户点击按钮之前，观看的值为42foo（42 + foo），点击42foo后4 + {{ 1}}）。因此不会调用监视功能。因此，如果无法确保不会出现这种情况，最好使用数组表达式。

2foo

http://plnkr.co/edit/2DwCOftQTltWFbEDiDlA?p=preview

PS：

如@reblace在评论中所述，当然可以访问值：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" rel="stylesheet" />
        <script src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
        <script src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
        <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
        <script src="http://code.angularjs.org/1.2.0-rc.2/angular-mocks.js"></script>
        <script>

angular.module('demo', []).controller('MainCtrl', function ($scope) {

    $scope.firstWatchFunctionCounter = 0;
    $scope.secondWatchFunctionCounter = 0;

    $scope.$watch('[age, name]', function () { $scope.firstWatchFunctionCounter++; }, true);
    $scope.$watch('age + name', function () { $scope.secondWatchFunctionCounter++; });
});

describe('Demo module', function () {
    beforeEach(module('demo'));
    describe('MainCtrl', function () {
        it('watch function should increment a counter', inject(function ($controller, $rootScope) {
            var scope = $rootScope.$new();
            scope.age = 42;
            scope.name = 'foo';
            var ctrl = $controller('MainCtrl', { '$scope': scope });
            scope.$digest();

            expect(scope.firstWatchFunctionCounter).toBe(1);
            expect(scope.secondWatchFunctionCounter).toBe(1);

            scope.age = 4;
            scope.name = '2foo';
            scope.$digest();

            expect(scope.firstWatchFunctionCounter).toBe(2);
            expect(scope.secondWatchFunctionCounter).toBe(2); // This will fail!
        }));
    });
});


(function () {
    var jasmineEnv = jasmine.getEnv();
    var htmlReporter = new jasmine.HtmlReporter();
    jasmineEnv.addReporter(htmlReporter);
    jasmineEnv.specFilter = function (spec) {
        return htmlReporter.specFilter(spec);
    };
    var currentWindowOnload = window.onload;
    window.onload = function() {
        if (currentWindowOnload) {
            currentWindowOnload();
        }
        execJasmine();
    };
    function execJasmine() {
        jasmineEnv.execute();
    }
})();

        </script>
    </head>
    <body></body>
</html>

Answer 2

$scope.$watch('age + name', function () {
  //called when name or age changed
});

Answer 3

Angular 1.3专门为此目的提供了$ watchGroup：

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watchGroup

这似乎提供了与表达式数组上的标准$ watch相同的最终结果。我喜欢它，因为它使代码中的意图更清晰。

Answer 4

有很多方法可以观看多个值：

//angular 1.1.4
$scope.$watchCollection(['foo', 'bar'], function(newValues, oldValues){
    // do what you want here
});

或更新版本

//angular 1.3
$scope.$watchGroup(['foo', 'bar'], function(newValues, oldValues, scope) {
  //do what you want here
});

阅读官方文档了解更多信息：https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

Answer 5

没有人提到这个显而易见的事实：

var myCallback = function() { console.log("name or age changed"); };
$scope.$watch("name", myCallback);
$scope.$watch("age", myCallback);

这可能意味着更少的民意调查。如果您同时观看name + age（对于此）和name（其他地方），那么我假设Angular会有效地查看name两次以查看它是否脏了。

通过名称使用回调而不是内联它可以说更具可读性。特别是如果你能给它一个比我的例子更好的名字。

如果您需要，您可以通过不同方式观看价值观：

$scope.$watch("buyers", myCallback, true);
$scope.$watchCollection("sellers", myCallback);

$watchGroup如果可以使用它会很好，但就我所知，它不会让你将组成员视为集合或具有对象相等。

如果在同一个回调函数调用中需要两个表达式的旧值和新值，那么其他一些提议的解决方案可能更方便。

如何$观察角度的多变量变化

5 个答案: