1. ホーム
  2. javascript

[解決済み] Angularjs:「構文としてのコントローラ」と$watch

2022-04-27 01:23:47

質問

を使用している場合、プロパティの変更時にサブスクライブするにはどうすればよいですか? 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>  

解決方法は?

関連するコンテキストをバインドするだけです。

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

http://jsbin.com/yinadoce/1/edit

UPDATE

Bogdan Gersakの回答は、実は同等で、どちらの回答もバインディングを試しています this を正しい文脈で表示します。しかし、私は彼の答えの方がすっきりしていると思いました。

とはいえ、まず第一に理解しなければならないのは その背後にある基本的な考え方 .

UPDATE 2:

ES6をお使いの方は arrow function を使うと、正しいコンテキストを持つ関数をOOTBで取得できます。

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