Angularjs： '構文としてのコントローラー'と$ watch

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

更新：

Bogdan Gersakの答えは実際には同等であり、どちらの答えthisも適切なコンテキストにバインドしようとします。しかし、私は彼の答えがすっきりしていた。

そうは言っても、何よりもまず、その背後にある基本的な考え方を理解する必要があります。

更新2：

ES6を使用する人は、使用arrow functionすることで、適切なコンテキストOOTBの関数を取得できます。

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

例

私は通常これを行います：

controller('TestCtrl', function ($scope) {
    var self = this;

    this.name = 'Max';
    this.changeName = function () {
        this.name = new Date();
   }

   $scope.$watch(function () {
       return self.name;
   },function(value){
        console.log(value)
   });
});

以下を使用できます。

   $scope.$watch("test.name",function(value){
        console.log(value)
   });

これはあなたの例でJSFiddleを動かしています。

「TestCtrl as test」から「test」を使用するのと同様に、別の回答で説明されているように、「自己」にスコープを割り当てることができます。

controller('TestCtrl', function($scope){
    var self = this;
    $scope.self = self;

    self.name = 'max';
    self.changeName = function(){
            self.name = new Date();
        }

    $scope.$watch("self.name",function(value){
            console.log(value)
        });
})

このようにして、DOMで指定された名前（「TestCtrl as test」）に縛られることはなく、関数に.bind（this）する必要もありません。

...元のhtmlを指定して使用する場合：

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

AngularJs 1.5は、ControllerAs構造のデフォルトの$ ctrlをサポートしています。

$scope.$watch("$ctrl.name", (value) => {
    console.log(value)
});

$ watch（）の最初の引数として実際に関数を渡すことができます。

 app.controller('TestCtrl', function ($scope) {
 this.name = 'Max';

// hmmm, a function
 $scope.$watch(function () {}, function (value){ console.log(value) });
 });

つまり、this.name参照を返すことができます。

app.controller('TestCtrl', function ($scope) {
    this.name = 'Max';

    // boom
    $scope.$watch(angular.bind(this, function () {
    return this.name; // `this` IS the `this` above!!
    }), function (value) {
      console.log(value);
    });
});

controllerAsトピックに関する興味深い投稿を読むhttps://toddmotto.com/digging-into-angulars-controller-as-syntax/

$ onChanges角度コンポーネントのライフサイクルを使用できます。

こちらのドキュメントをご覧ください：https : //docs.angularjs.org/guide/component のComponent-based applicationセクション

ES6構文で$ watchを書くのは、思ったほど簡単ではありませんでした。できることは次のとおりです。

// Assuming
// controllerAs: "ctrl"
// or
// ng-controller="MyCtrl as ctrl"
export class MyCtrl {
  constructor ($scope) {
    'ngInject';
    this.foo = 10;
    // Option 1
    $scope.$watch('ctrl.foo', this.watchChanges());
    // Option 2
    $scope.$watch(() => this.foo, this.watchChanges());
  }

  watchChanges() {
    return (newValue, oldValue) => {
      console.log('new', newValue);
    }
  }
}

注：ViewとControllerがルートで、またはディレクティブ定義オブジェクトを介して結合されている場合、これは機能しません。以下に示すものは、HTMLに「SomeController as SomeCtrl」がある場合にのみ機能します。Mark Vが下のコメントで指摘しているように、彼が言うように、Bogdanがするようにした方が良いです。

私が使用するのvar vm = this;は、コントローラの最初で「これ」という言葉を邪魔にならないようにするためです。その後vm.name = 'Max';、私は時計でreturn vm.name。@Bogdanが「自己」を使用するのと同じように、「vm」を使用します。この変数は、「this」という単語が関数内で異なるコンテキストをとるため、「vm」または「self」が必要です。（したがって、this.nameを返すことはできません）そして、はい、$ watchに到達するには、$ scopeを美しい "controller as"ソリューションに挿入する必要があります。John Papaのスタイルガイドを参照してください：https : //github.com/johnpapa/angularjs-styleguide#controllers

function SomeController($scope, $log) {
    var vm = this;
    vm.name = 'Max';

    $scope.$watch('vm.name', function(current, original) {
        $log.info('vm.name was %s', original);
        $log.info('vm.name is now %s', current);
    });
}

$ scope（および$ watch！）なしでこれを行う方法は次のとおりです。

"controller as"構文を使用している場合は、$ scopeの使用を回避する方が適切でわかりやすくなります。

これがJSFiddleのコードです。（名前を保持するためにサービスを使用しています。それ以外の場合、ES5 Object.definePropertyのsetメソッドとgetメソッドが無限呼び出しを引き起こします。

var app = angular.module('my-module', []);

app.factory('testService', function() {
    var name = 'Max';

    var getName = function() {
        return name;
    }

    var setName = function(val) {
        name = val;
    }

    return {getName:getName, setName:setName};
});

app.controller('TestCtrl', function (testService) {
    var vm = this;

    vm.changeName = function () {
        vm.name = new Date();
    }

    Object.defineProperty(this, "name", {
        enumerable: true,
        configurable: false,
        get: function() {
            return testService.getName();
        },
        set: function (val) {
            testService.setName(val);
            console.log(vm.name);
        }
    }); 
});