Angularjs: 'controller as syntax' e $ watch

Como se inscrever na alteração de propriedade ao usar a controller assintaxe?

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>  

Apenas ligue o contexto relevante.

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

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

ATUALIZAR:

A resposta de Bogdan Gersak é, na verdade, meio equivalente, ambas as respostas tentam ser vinculadas thisao contexto certo. No entanto, achei sua resposta mais limpa.

Dito isso, em primeiro lugar, você precisa entender a ideia subjacente a ela .

ATUALIZAÇÃO 2:

Para quem usa o ES6, ao usar, arrow functionvocê obtém uma função com o contexto correto OOTB.

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

Exemplo

Eu costumo fazer isso:

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

Você pode usar:

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

Isso está trabalhando o JSFiddle com o seu exemplo.

Semelhante ao uso do "teste" de "TestCtrl como teste", conforme descrito em outra resposta, você pode atribuir a si mesmo seu escopo:

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

Dessa forma, você não está vinculado ao nome especificado no DOM ("TestCtrl como teste") e também evita a necessidade de vincular (isso) a uma função.

... para uso com o 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 suporta o $ ctrl padrão para a estrutura ControllerAs.

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

você pode realmente passar uma função como o primeiro argumento de um $ watch ():

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

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

O que significa que podemos retornar nossa referência 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);
    });
});

Leia um post interessante sobre o controlador Como tópico https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Você pode usar o ciclo de vida do componente angular $ onChanges .

consulte a documentação aqui: https://docs.angularjs.org/guide/component na seção de aplicativos baseados em componentes

Escrever um $ watch na sintaxe ES6 não foi tão fácil quanto eu esperava. Aqui está o que você pode fazer:

// 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 : Isso não funciona quando o View e o Controller são acoplados em uma rota ou através de um objeto de definição de diretiva. O que é mostrado abaixo só funciona quando há um "SomeController as SomeCtrl" no HTML. Assim como Mark V. aponta no comentário abaixo, e assim como ele diz que é melhor fazer como Bogdan faz.

Eu uso: var vm = this;no início do controlador para tirar a palavra "isso" do meu caminho. Então vm.name = 'Max';e no relógio eu return vm.name. Eu uso o "vm" assim como o @Bogdan usa o "self". Essa var, seja "vm" ou "self", é necessária, pois a palavra "this" assume um contexto diferente dentro da função. (portanto, retornar this.name não funcionaria) E sim, você precisa injetar $ scope em sua bela solução "controller as" para alcançar $ watch. Consulte o Guia 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);
    });
}

Aqui está como você faz isso sem $ scope (e $ watch!) Os 5 principais erros - abuso de relógio

Se você estiver usando a sintaxe "controller as", é melhor e mais limpo evitar o uso do $ scope.

Aqui está o meu código no JSFiddle . (Estou usando um serviço para armazenar o nome, caso contrário, os métodos set e get do ES5 Object.defineProperty causam chamadas 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);
        }
    }); 
});