javascript - 使用 `this.$watch` 而不是 `$scope.$watch` 和 'Controller As'

Question

目前我正在使用 Controller As 格式来定义范围 Controller 。

这对于保持 View 上的值范围清晰且易于遵循非常有效。

<div ng-app="myApp" ng-controller="myController as myctrl">
    <ul>
        <li ng-repeat="contact in myctrl.contacts">
            <input type="text" ng-model="contact.name.first" />
        </li>
    </ul>
</div>

但是，在实现 $watch 时我遇到了问题，因为它似乎依赖于 $scope，所以下面的代码将不起作用。

angular.module('myApp',[])
.controller('myController',['contacts',function(contacts) {
    this.contacts = contacts;

    this.$watch('contacts', function(newValue, oldValue) {
       console.log({older: oldValue, newer:newValue});
    });

}]);

我得到 undefined is not a function 引用 this not having a method $watch。

有没有一种方法可以$watch Controller As 格式的值？

JS Fiddle

Answer 1

即使使用 controllerAs 格式，$scope 也存在。

事实上 controllerAs 所做的是将 Controller 实例的 this 绑定(bind)到 $scope。
例如。 controller="myController as myctrl"(在幕后):$scope.myctrl = this(其中 this 指的是 myController 实例)。

因此，您只需为 watch 注入(inject)和使用 $scope:

.controller('myController', function ($scope, contacts) {
    this.contacts = contacts;

    $scope.$watch(function () {
        return contacts;
    }, function (newValue, oldValue) {...});
});