Angularjs: 'sözdizimi olarak denetleyici' ve $ watch

controller asSözdizimi kullanılırken mülk değişikliğine nasıl abone olunur ?

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>  

Sadece ilgili bağlamı bağlayın.

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

Örnek: http://jsbin.com/yinadoce/1/edit

GÜNCELLEME:

Bogdan Gersak'ın cevabı aslında eşdeğerdir, her iki cevap thisda doğru bağlamla bağlanmaya çalışır. Ancak cevabını daha temiz buldum.

Bunu söyledikten sonra, her şeyden önce, arkasındaki temel fikri anlamanız gerekir .

GÜNCELLEME 2:

ES6 kullananlar arrow functioniçin, doğru içerik OOTB ile bir işlev elde edersiniz.

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

Misal

Genellikle bunu yaparım:

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

Kullanabilirsiniz:

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

Bu örnek ile JSFiddle çalışıyor .

Başka bir cevapta açıklandığı gibi, "TestCtrl test olarak" dan "test" kullanmaya benzer şekilde, kapsamınıza "ben" atayabilirsiniz:

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

Bu şekilde, DOM'de belirtilen ada bağlı değilsiniz ("testCtrl as test") ve ayrıca bir işleve .bind (this) bağlamanız gerekmez.

... belirtilen orijinal html ile kullanım için:

<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, ControllerAs yapısı için varsayılan $ ctrl'yi destekler.

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

bir işlevi $ watch () işlevinin ilk argümanı olarak iletebilirsiniz:

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

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

Bu, this.name referansımızı iade edebileceğimiz anlamına gelir:

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

Denetleyici hakkında ilginç bir yazı okuyun Konu https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Sen kullanabilirsiniz $ onChanges açısal bileşen yaşam döngüsünü.

Bileşen tabanlı uygulama bölümü altındaki https://docs.angularjs.org/guide/component buradaki belgelere bakın

ES6 sözdiziminde $ watch yazmak beklediğim kadar kolay değildi. İşte yapabilecekleriniz:

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

NOT : Bu, Görünüm ve Denetleyici bir rotada veya bir yönerge tanımlama nesnesi aracılığıyla bağlandığında çalışmaz. Aşağıda gösterilenler yalnızca HTML'de "SomeCtrl olarak SomeController" olduğunda işe yarar. Tıpkı Mark V.'nin aşağıdaki yorumda belirttiği gibi ve tıpkı Bogdan'ın yaptığı gibi yapmanın daha iyi olduğunu söylediği gibi.

Ben kullanıyorum: var vm = this;kontrolörün başında "bu" kelimesini yolumdan almak için. Sonra vm.name = 'Max';ve saatte ben return vm.name. @Bogdan "kendini" kullandığı gibi "vm" kullanıyorum. Bu var, "vm" ya da "self" olsun, çünkü "this" kelimesi fonksiyonun içinde farklı bir bağlam üstlenir. (yani this.name döndürmek işe yaramaz) Ve evet, $ watch ulaşmak için güzel "kontrolör" çözüm olarak $ kapsam enjekte gerekir. Bkz. John Papa'nın Stil Kılavuzu: 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);
    });
}

Bunu $ scope (ve $ watch!) Olmadan şu şekilde yapabilirsiniz: En İyi 5 Hata - Saati kötüye kullanma

"Controller as" sözdizimini kullanıyorsanız, $ scope kullanmamak daha iyidir.

İşte benim kod JSFiddle . (Adı tutmak için bir hizmet kullanıyorum, aksi takdirde ES5 Object.defineProperty's set ve alma yöntemleri sonsuz çağrılara neden olur.

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