Angularjs: 'controller as syntax' et $ watch

Comment s'abonner au changement de propriété lors de l'utilisation de la controller assyntaxe?

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>  

Liez simplement le contexte pertinent.

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

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

METTRE À JOUR:

La réponse de Bogdan Gersak est en fait un peu équivalente, les deux réponses essaient de se lier thisavec le bon contexte. Cependant, j'ai trouvé sa réponse plus propre.

Cela dit, vous devez d'abord et avant tout comprendre l'idée sous-jacente .

MISE À JOUR 2:

Pour ceux qui utilisent ES6, en utilisant arrow functionvous obtenez une fonction avec le bon contexte OOTB.

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

Exemple

Je fais généralement ceci:

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

Vous pouvez utiliser:

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

Cela fonctionne JSFiddle avec votre exemple.

Similaire à l'utilisation du "test" de "TestCtrl as test", comme décrit dans une autre réponse, vous pouvez attribuer "self" votre champ d'application:

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

De cette façon, vous n'êtes pas lié au nom spécifié dans le DOM ("TestCtrl as test") et vous évitez également de devoir lier (this) à une fonction.

... à utiliser avec le code HTML d'origine spécifié:

<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 prend en charge la valeur par défaut $ ctrl pour la structure ControllerAs.

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

vous pouvez en fait passer une fonction comme premier argument d'un $ watch ():

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

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

Ce qui signifie que nous pouvons renvoyer notre référence 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);
    });
});

Lisez un article intéressant sur ControllerAs topic https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Vous pouvez utiliser le cycle de vie des composants angulaires $ onChanges .

voir la documentation ici: https://docs.angularjs.org/guide/component sous la section Application basée sur les composants

Écrire une $ watch dans la syntaxe ES6 n'a pas été aussi facile que je m'y attendais. Voici ce que vous pouvez faire:

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

REMARQUE : cela ne fonctionne pas lorsque View et Controller sont couplés dans une route ou via un objet de définition de directive. Ce qui est montré ci-dessous ne fonctionne que lorsqu'il y a un "SomeController as SomeCtrl" dans le HTML. Tout comme Mark V. le souligne dans le commentaire ci-dessous, et comme il le dit, il vaut mieux faire comme Bogdan le fait.

J'utilise: var vm = this;au début du contrôleur pour me débarrasser du mot «ceci». Ensuite , vm.name = 'Max';et dans la montre que je return vm.name. J'utilise le "vm" comme @Bogdan utilise "self". Cette variable, que ce soit "vm" ou "self" est nécessaire car le mot "this" prend un contexte différent à l'intérieur de la fonction. (donc retourner this.name ne fonctionnerait pas) Et oui, vous devez injecter $ scope dans votre belle solution "controller as" afin d'atteindre $ watch. Voir le guide de style de 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);
    });
}

Voici comment faire cela sans $ scope (et $ watch!) Top 5 des erreurs - Abuser de la montre

Si vous utilisez la syntaxe "controller as", il vaut mieux éviter d'utiliser $ scope.

Voici mon code dans JSFiddle . (J'utilise un service pour contenir le nom, sinon l'ensemble des méthodes ES5 Object.defineProperty et get provoquent des appels infinis.

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