Angularjs: 'controlador como sintaxis' y $ watch

¿Cómo suscribirse al cambio de propiedad cuando se usa la controller assintaxis?

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>  

Solo vincula el contexto relevante.

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

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

ACTUALIZAR:

La respuesta de Bogdan Gersak es realmente equivalente, ambas respuestas intentan vincularse thiscon el contexto correcto. Sin embargo, encontré su respuesta más limpia.

Dicho esto, en primer lugar, debe comprender la idea subyacente detrás de esto .

ACTUALIZACIÓN 2:

Para aquellos que usan ES6, al usarlo arrow functionobtienes una función con el contexto correcto OOTB.

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

Ejemplo

Usualmente hago esto:

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

Puedes usar:

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

Esto está trabajando JSFiddle con su ejemplo.

De manera similar al uso de la "prueba" de "TestCtrl como prueba", como se describe en otra respuesta, puede asignar "self" a su alcance:

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 esta manera, no está vinculado al nombre especificado en el DOM ("TestCtrl como prueba") y también evita la necesidad de vincular (esto) a una función.

... para usar con el html original especificado:

<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 admite el valor predeterminado $ ctrl para la estructura ControllerAs.

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

en realidad puede pasar una función como primer argumento de un $ watch ():

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

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

Lo que significa que podemos devolver nuestra referencia 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);
    });
});

Lea una publicación interesante sobre el tema controllerAs https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Puede usar el ciclo de vida del componente angular $ onChanges .

ver documentación aquí: https://docs.angularjs.org/guide/component en la sección de aplicación basada en componentes

Escribir un $ watch en la sintaxis de ES6 no fue tan fácil como esperaba. Esto es lo que puedes hacer:

// 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 : Esto no funciona cuando View y Controller están acoplados en una ruta o a través de un objeto de definición de directiva. Lo que se muestra a continuación solo funciona cuando hay un "SomeController as SomeCtrl" en el HTML. Al igual que Mark V. señala en el comentario a continuación, y tal como él dice, es mejor hacer lo que Bogdan hace.

Yo uso: var vm = this;al comienzo del controlador para quitar la palabra "this" de mi camino. Entonces vm.name = 'Max';y en el reloj yo return vm.name. Yo uso el "vm" al igual que @Bogdan usa "self". Esta var, ya sea "vm" o "self", es necesaria ya que la palabra "this" toma un contexto diferente dentro de la función. (por lo que devolver this.name no funcionaría) Y sí, debe inyectar $ scope en su hermosa solución "controlador como" para llegar a $ watch. Consulte la Guía de estilo 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);
    });
}

Así es como se hace esto sin $ scope (y $ watch!) Los 5 errores principales: abuso de reloj

Si está utilizando la sintaxis "controlador como", es mejor y más limpio evitar usar $ scope.

Aquí está mi código en JSFiddle . (Estoy usando un servicio para mantener el nombre; de ​​lo contrario, el conjunto ES5 Object.defineProperty y los métodos get causan llamadas infinitas.

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