Angularjs: 'controller as syntax' e $ watch

Come iscriversi al cambio di proprietà quando si utilizza la controller assintassi?

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>  

Basta associare il contesto rilevante.

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

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

AGGIORNARE:

La risposta di Bogdan Gersak è in realtà un po 'equivalente, entrambe le risposte cercano di legare thiscon il giusto contesto. Tuttavia, ho trovato la sua risposta più pulita.

Detto questo, prima di tutto, devi capire l'idea che sta alla base .

AGGIORNAMENTO 2:

Per coloro che usano ES6, usando arrow functionsi ottiene una funzione con il giusto contesto OOTB.

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

Esempio

Di solito lo faccio:

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

Puoi usare:

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

Questo funziona JSFiddle con il tuo esempio.

Simile all'utilizzo del "test" da "TestCtrl come test", come descritto in un'altra risposta, è possibile assegnare "self" al proprio ambito:

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

In questo modo, non sei legato al nome specificato nel DOM ("TestCtrl come test") ed eviti anche la necessità di .bind (this) a una funzione.

... da utilizzare con l'html originale specificato:

<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 supporta $ ctrl predefinito per la struttura ControllerAs.

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

puoi effettivamente passare una funzione come primo argomento di un $ watch ():

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

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

Ciò significa che possiamo restituire il nostro riferimento 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);
    });
});

Leggi un post interessante sull'argomento ControllerAs https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Puoi usare $ onChanges il ciclo di vita del componente angolare.

consultare la documentazione qui: https://docs.angularjs.org/guide/component nella sezione Applicazione basata su componenti

Scrivere un $ watch nella sintassi ES6 non è stato facile come mi aspettavo. Ecco cosa puoi fare:

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

NOTA : questo non funziona quando View e Controller sono accoppiati in una route o attraverso un oggetto di definizione della direttiva. Ciò che viene mostrato sotto funziona solo quando c'è un "SomeController as SomeCtrl" nell'HTML. Proprio come Mark V. sottolinea nel commento qui sotto, e proprio come dice è meglio fare come Bogdan.

Uso: var vm = this;all'inizio del controller per togliere la parola "questo". Quindi vm.name = 'Max';e nell'orologio io return vm.name. Uso "vm" proprio come @Bogdan usa "self". Questo var, sia esso "vm" o "self" è necessario poiché la parola "this" assume un contesto diverso all'interno della funzione. (quindi restituire this.name non funzionerebbe) E sì, devi raggiungere $ scope nel tuo bellissimo "controller as" come soluzione per raggiungere $ watch. Vedi la Guida allo stile di 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);
    });
}

Ecco come farlo senza $ scope (e $ watch!) I 5 errori più importanti - Abuso dell'orologio

Se stai usando la sintassi "controller as", è meglio e più pulito evitare di usare $ scope.

Ecco il mio codice in JSFiddle . (Sto usando un servizio per contenere il nome, altrimenti il ​​set ES5 Object.defineProperty e i metodi get causano chiamate infinite.

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