Angularjs: 'Controller als Syntax' und $ watch

Wie abonniere ich eine Eigenschaftsänderung, wenn ich die controller asSyntax verwende?

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>  

Binden Sie einfach den relevanten Kontext.

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

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

AKTUALISIEREN:

Bogdan Gersaks Antwort ist eigentlich eine Art Äquivalent, beide Antworten versuchen, sich thismit dem richtigen Kontext zu verbinden. Ich fand seine Antwort jedoch sauberer.

Vor diesem Hintergrund muss man in erster Linie die zugrunde liegende Idee verstehen .

UPDATE 2:

Für diejenigen, die ES6 verwenden, erhalten Sie durch die Verwendung arrow functioneine Funktion mit dem richtigen Kontext OOTB.

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

Beispiel

Normalerweise mache ich das:

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

Sie können verwenden:

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

Dies funktioniert JSFiddle mit Ihrem Beispiel.

Ähnlich wie bei der Verwendung des "Tests" von "TestCtrl als Test", wie in einer anderen Antwort beschrieben, können Sie Ihrem Bereich "Selbst" zuweisen:

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

Auf diese Weise sind Sie nicht an den im DOM angegebenen Namen gebunden ("TestCtrl as test") und vermeiden auch die Notwendigkeit, (dies) an eine Funktion zu binden.

... zur Verwendung mit dem angegebenen Original-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 unterstützt die Standard $ ctrl für die ControllerAs-Struktur.

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

Sie können tatsächlich eine Funktion als erstes Argument einer $ watch () übergeben:

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

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

Das heißt, wir können unsere this.name-Referenz zurückgeben:

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

Lesen Sie einen interessanten Beitrag zum Thema controllerAs https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Sie können den Winkelkomponenten-Lebenszyklus von $ onChanges verwenden .

Siehe Dokumentation hier: https://docs.angularjs.org/guide/component im Abschnitt Komponentenbasierte Anwendung

Das Schreiben einer $ watch in ES6-Syntax war nicht so einfach wie ich erwartet hatte. Folgendes können Sie tun:

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

HINWEIS : Dies funktioniert nicht, wenn View und Controller in einer Route oder über ein Direktivendefinitionsobjekt gekoppelt sind. Was unten gezeigt wird, funktioniert nur, wenn der HTML-Code einen "SomeController as SomeCtrl" enthält. Genau wie Mark V. im Kommentar unten betont, und genau wie er sagt, ist es besser, so zu tun, wie Bogdan es tut.

Ich benutze: var vm = this;am Anfang des Controllers, um das Wort "dies" aus dem Weg zu räumen. Dann vm.name = 'Max';und in der Uhr ich return vm.name. Ich benutze das "vm" genau wie @Bogdan "self" benutzt. Diese Variable, sei es "vm" oder "self", wird benötigt, da das Wort "this" innerhalb der Funktion einen anderen Kontext annimmt. (Die Rückgabe dieses Namens würde also nicht funktionieren.) Und ja, Sie müssen $ scope in Ihre schöne "Controller as" -Lösung einfügen, um $ watch zu erreichen. Siehe John Papas Style Guide: 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);
    });
}

Hier erfahren Sie, wie Sie dies ohne $ scope (und $ watch!) Tun. Top 5 Fehler - Missbrauch der Uhr

Wenn Sie die Syntax "controller as" verwenden, ist es besser und sauberer, die Verwendung von $ scope zu vermeiden.

Hier ist mein Code in JSFiddle . (Ich verwende einen Dienst, um den Namen zu speichern, andernfalls verursachen die Set- und Get-Methoden von ES5 Object.defineProperty unendliche Aufrufe.

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