使用'this.$ watch`而不是`$ scope.$ watch`与'Controller As'

Question

目前我正在使用Controller As范围控制器的格式.

这非常有效,可以使视图上的值范围清晰易懂.

<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不是一个参考this没有方法的函数$watch.

有没有办法$watch获得Controller As格式的值？

JS小提琴

Answer 1

即使有controllerAs格式,它就在$scope那里.

实际上,controllerAs将控制器实例绑定this到$ scope的是什么.
例如controller="myController as myctrl"(幕后):( $scope.myctrl = this其中this指myController实例).

所以,你可以注入并使用$scopefor watch:

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

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