Angularjs: 'controller as syntax' dan $ watch

Bagaimana cara berlangganan perubahan properti saat menggunakan controller assintaks?

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>  

Ikat saja konteks yang relevan.

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

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

MEMPERBARUI:

Jawaban Bogdan Gersak sebenarnya setara, kedua jawaban itu mencoba mengikat thisdengan konteks yang benar. Namun, saya menemukan jawabannya lebih bersih.

Setelah mengatakan itu, pertama dan terutama, Anda harus memahami ide yang mendasarinya .

PEMBARUAN 2:

Bagi mereka yang menggunakan ES6, dengan menggunakan arrow functionAnda mendapatkan fungsi dengan konteks yang tepat OOTB.

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

Contoh

Saya biasanya melakukan ini:

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

Kamu bisa memakai:

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

Ini berfungsi JSFiddle dengan contoh Anda.

Mirip dengan menggunakan "tes" dari "TestCtrl sebagai tes", seperti yang dijelaskan dalam jawaban lain, Anda dapat menetapkan "diri" lingkup Anda:

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

Dengan cara ini, Anda tidak terikat dengan nama yang ditentukan dalam DOM ("TestCtrl as test") dan Anda juga menghindari keharusan .bind (this) ke suatu fungsi.

... untuk digunakan dengan html asli yang ditentukan:

<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 mendukung $ ctrl default untuk struktur ControllerAs.

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

Anda benar-benar dapat meneruskan fungsi sebagai argumen pertama dari $ watch ():

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

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

Yang berarti kami dapat mengembalikan referensi this.name kami:

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

Baca posting menarik tentang topik controllerAs https://toddmotto.com/digging-into-angulars-controller-as-syntax/

Anda dapat menggunakan siklus hidup komponen sudut $ onChanges .

lihat dokumentasi di sini: https://docs.angularjs.org/guide/component di bawah bagian aplikasi berbasis Komponen

Menulis $ arloji dalam sintaks ES6 tidak semudah yang saya harapkan. Inilah yang dapat Anda lakukan:

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

CATATAN : Ini tidak berfungsi ketika View dan Controller digabungkan dalam rute atau melalui objek definisi direktif. Apa yang ditampilkan di bawah ini hanya berfungsi ketika ada "SomeController sebagai SomeCtrl" di HTML. Seperti Mark V. tunjukkan dalam komentar di bawah, dan seperti yang dia katakan lebih baik dilakukan seperti yang dilakukan Bogdan.

Saya menggunakan: var vm = this;di awal controller untuk mendapatkan kata "ini" keluar dari jalan saya. Lalu vm.name = 'Max';dan di arloji saya return vm.name. Saya menggunakan "vm" sama seperti @Bogdan menggunakan "diri". Var ini, baik itu "vm" atau "diri" diperlukan karena kata "ini" mengambil konteks yang berbeda di dalam fungsi. (jadi mengembalikan this.name tidak berfungsi) Dan ya, Anda perlu menyuntikkan $ scope pada solusi "controller as" Anda yang indah untuk mencapai $ watch. Lihat Panduan Gaya 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);
    });
}

Inilah cara Anda melakukan ini tanpa $ scope (dan $ watch!) Top 5 Kesalahan - Menonton yang menyalahgunakan

Jika Anda menggunakan sintaks "controller as", lebih baik dan bersih untuk menghindari penggunaan $ scope.

Ini kode saya di JSFiddle . (Saya menggunakan layanan untuk menyimpan nama, jika ES5 Object.defineProperty mengatur dan mendapatkan metode menyebabkan panggilan tak terbatas.

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