angularjs $watchGroup 与控制器作为语法答案

【问题标题】：angularjs $watchGroup with controller as syntaxangularjs $watchGroup 与控制器作为语法
【发布时间】：2015-02-11 05:18:27
【问题描述】：

根据我最近阅读的一堆 Angular JS 样式指南，出于几个原因，Angular JS 控制器的“控制器作为”语法似乎是首选。

我已经看到了如何注入 $scope 以使用 $watch、$on 等特殊方法的示例。

下面的这个例子展示了如何使用“controller as”语法成功地使用 $watch：

$scope.$watch(angular.bind(this, function () { 
    return this.name;
}), function(value) {
    console.log('Name change to ' + value);
});

我在任何地方都没有找到如何使用 $watchGroup 使用这种类似的方法。有谁知道怎么做？

【问题讨论】：

完全一样：$scope.$watchGroup

标签： angularjs angularjs-scope

【解决方案1】：

假设控制器有两个属性，firstName 和 lastName。要在其中任何一个发生更改时调用函数，请使用函数数组作为 $watchGroup 的第一个参数。

var self = this;
$scope.$watchGroup([function() {
    return self.firstName;
}, function () {
    return self.lastName;
}], function(newValues, oldValues) {
    console.log('Name change to ' + newValues[0] + ' ' + newValues[1]);
});

请注意，newValues 是一个包含新 firstName 和 lastName 的数组。

【讨论】：

【解决方案2】：

要使用 #watchGroup 使用控制器作为语法，首先你必须以下列方式声明你的控制器：

app.controller('Controller1', ['$scope', Controller1]);

function Controller1($scope) {
    var vm = this;
    vm.firstName = 'Agustin';
    vm.lastName = 'Cassani';
    vm.newVal = '';
    vm.oldVal = '';

    $scope.$watchGroup(['vm.firstName', 'vm.lastName'], function (newValue, oldValue) {
        vm.newVal = newValue;
        vm.oldVal = oldValue;
    });
}

如您所见，我们在 vm 变量中引用了“this”。

在你的应用程序路由配置中，如果你在路由定义中声明你的控制器，你会得到这样的东西，当然：

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/', {
            templateUrl: 'app/views/view1.html',
            controller: 'Controller1',
            controllerAs: 'vm'
        }).
        otherwise({
            redirectTo: '/'
        });
  }]);

最后，我们视图的 html 会是这样的：

<input type="text" data-ng-model="vm.firstName" />
<input type="text" data-ng-model="vm.lastName"/>
<br/>
<div>
    {{vm.newVal}}
</div>
<div>
    {{vm.oldVal}}
</div>

I.H.I.H（希望对您有所帮助！）

【讨论】：