Question

基于我最近阅读的一堆Angular JS样式指南，似乎有几个原因，首选Angular JS控制器的'controller as'语法。

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

下面的示例显示如何使用'controller as'语法成功使用$ watch：

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

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

Answer 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的数组。

Answer 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（我希望它能帮助！）

angularjs $ watchGroup以控制器作为语法

2 个答案: