AngularJS：'控制器作为语法'和$ watch

Question

使用controller as语法时如何订阅属性更改？

controller('TestCtrl', function ($scope) {
  this.name = 'Max';
  this.changeName = function () {
    this.name = new Date();
  }
  // not working       
  $scope.$watch("name",function(value){
    console.log(value)
  });
});



<div ng-controller="TestCtrl as test">
  <input type="text" ng-model="test.name" />
  <a ng-click="test.changeName()" href="#">Change Name</a>
</div>

Answer 1

只需绑定相关上下文即可。

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

示例：http：//jsbin.com/yinadoce/1/edit

更新：

Bogdan Gersak的答案实际上是等效的，两个答案都尝试this在正确的上下文中进行绑定。但是，我发现他的答案更干净。

话虽如此，首先，您必须了解其背后的基本思想。

更新2：

对于那些使用ES6的人，通过使用它们arrow function可以获得具有正确上下文OOTB的功能。

$scope.$watch(() => this.name, function (newVal) {
  console.log('Name changed to ' + newVal);
});

例