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

ОНОВЛЕННЯ:

Відповідь Богдана Герсака насправді є рівнозначною, обидві відповіді намагаються зв’язати 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 з вашим прикладом.

Аналогічно використанню "test" від "TestCtrl as test", як описано в іншій відповіді, ви можете призначити "self" вашій області застосування:

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 як тест"), і ви також уникаєте необхідності .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 підтримує $ ctrl за замовчуванням для структури ControllerAs.

$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);
    });
});

Прочитайте цікавий пост про тему контролера https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Можна використовувати життєвий цикл кутових компонентів $ onChanges .

див. документацію тут: https://docs.angularjs.org/guide/component в розділі додатків на основі компонентів

Написати годинник $ у синтаксисі ES6 було не так просто, як я очікував. Ось що можна зробити:

// 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". Так само, як Марк В. зазначає в коментарі нижче, і так само, як він каже, краще зробити так, як це робить Богдан.

Я використовую: var vm = this;на початку контролер, щоб отримати слово "це" зі свого шляху. Тоді vm.name = 'Max';і на вахті я return vm.name. Я використовую "vm" так само, як @Bogdan використовує "self". Цей var, будь то "vm" або "self", потрібен, оскільки слово "this" набуває іншого контексту всередині функції. (тому повернення цього імені не буде працювати) І так, вам потрібно ввести $ range у вашому прекрасному рішенні "контролер як", щоб досягти $ watch. Дивіться посібник зі стилю Джона Папи: 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);
    });
}

Ось як ви це робите без $ range (і $ watch!) Топ-5 помилок - зловживання годинником

Якщо ви використовуєте синтаксис "контролер як", краще і чіткіше уникати використання $ range.

Ось мій код у JSFiddle . (Я використовую службу для утримання імені, інакше набір і отримання методів ES5 Object.defineProperty викликає нескінченні дзвінки.

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);
        }
    }); 
});