Angularjs: 'controller as syntax' i $ watch

Jak zasubskrybować zmianę właściwości przy użyciu controller asskładni?

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>  

Po prostu połącz odpowiedni kontekst.

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

Przykład: http://jsbin.com/yinadoce/1/edit

AKTUALIZACJA:

Odpowiedź Bogdana Gersaka jest właściwie odpowiednikiem, obie odpowiedzi starają się połączyć z odpowiednim thiskontekstem. Jednak jego odpowiedź była dla mnie czystsza.

Mając to na uwadze, przede wszystkim musisz zrozumieć leżącą u podstaw ideę .

AKTUALIZACJA 2:

Dla tych, którzy używają ES6, używając arrow functiondostaniesz funkcję z odpowiednim kontekstem OOTB.

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

Przykład

Zwykle robię to:

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

Możesz użyć:

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

To działa JSFiddle z twoim przykładem.

Podobnie jak przy użyciu opcji „test” z „TestCtrl jako test”, jak opisano w innej odpowiedzi, możesz przypisać zakres „samodzielnie”:

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

W ten sposób nie jesteś przywiązany do nazwy określonej w DOM („TestCtrl jako test”), a także unikasz konieczności wiązania .bind (this) z funkcją.

... do użytku z określonym oryginalnym kodem 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 obsługuje domyślną $ ctrl dla struktury ControllerAs.

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

faktycznie możesz przekazać funkcję jako pierwszy argument $ watch ():

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

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

Co oznacza, że ​​możemy zwrócić odwołanie 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);
    });
});

Przeczytaj interesujący post o kontrolerze W temacie https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Możesz użyć cyklu życia komponentu kątowego $ onChanges .

zobacz dokumentację tutaj: https://docs.angularjs.org/guide/component w sekcji Aplikacje oparte na komponentach

Napisanie zegarka $ watch w składni ES6 nie było tak łatwe, jak się spodziewałem. Oto, co możesz zrobić:

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

UWAGA : To nie działa, gdy widok i kontroler są połączone w trasie lub za pośrednictwem obiektu definicji dyrektywy. To, co pokazano poniżej, działa tylko wtedy, gdy w kodzie HTML znajduje się „SomeController as SomeCtrl”. Tak jak zaznacza Mark V. w komentarzu poniżej, i tak jak mówi, lepiej robić tak, jak robi to Bogdan.

Używam: var vm = this;na początku kontrolera, aby słowo „to” zniknęło mi z drogi. Wtedy vm.name = 'Max';i na zegarku ja return vm.name. Używam „vm” tak samo, jak @Bogdan używa „self”. Ta zmienna, czy to „vm”, czy „self”, jest potrzebna, ponieważ słowo „this” przyjmuje inny kontekst wewnątrz funkcji. (więc zwrócenie this.name nie zadziałałoby) I tak, musisz wstrzyknąć $ scope do swojego pięknego rozwiązania „controller as”, aby dotrzeć do $ watch. Zobacz przewodnik po stylu Johna Papy: 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);
    });
}

Oto jak to zrobić bez $ scope (i $ watch!) Top 5 błędów - nadużywanie zegarka

Jeśli używasz składni „kontroler jako”, lepiej i czyściej unikać używania $ scope.

Oto mój kod w JSFiddle . (Używam usługi do przechowywania nazwy, w przeciwnym razie metody set i get ES5 Object.defineProperty powodują nieskończone wywołania.

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