Angularjs: 'bộ điều khiển như cú pháp' và $ watch

Làm thế nào để đăng ký thay đổi thuộc tính khi sử dụng controller ascú pháp?

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>  

Chỉ cần ràng buộc bối cảnh có liên quan.

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

Ví dụ: http://jsbin.com/yinadoce/1/edit

CẬP NHẬT:

Câu trả lời của Bogdan Gersak thực sự là loại tương đương, cả hai câu trả lời đều cố gắng ràng buộc thisvới đúng ngữ cảnh. Tuy nhiên, tôi thấy câu trả lời của anh sạch hơn.

Điều đó nói rằng, đầu tiên và quan trọng nhất, bạn phải hiểu ý tưởng tiềm ẩn đằng sau nó .

CẬP NHẬT 2:

Đối với những người sử dụng ES6, bằng cách sử dụng, arrow functionbạn có được một hàm với ngữ cảnh OOTB phù hợp.

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

Thí dụ

Tôi thường làm điều này:

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

Bạn có thể dùng:

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

Điều này đang làm việc với JSFiddle với ví dụ của bạn.

Tương tự như sử dụng "kiểm tra" từ "TestCtrl làm kiểm tra", như được mô tả trong câu trả lời khác, bạn có thể chỉ định "tự" phạm vi của mình:

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

Theo cách này, bạn không bị ràng buộc với tên được chỉ định trong DOM ("TestCtrl là thử nghiệm") và bạn cũng tránh được yêu cầu .bind (cái này) cho một hàm.

... Để sử dụng với html gốc được chỉ định:

<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 hỗ trợ $ ctrl mặc định cho cấu trúc ControllerAs.

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

bạn thực sự có thể chuyển vào một hàm làm đối số đầu tiên của $ watch ():

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

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

Điều đó có nghĩa là chúng ta có thể trả về tham chiếu 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);
    });
});

Đọc một bài viết thú vị về bộ điều khiểnAs chủ đề https://toddmotto.com/digging-into-angenses-controll-as-syntax/

Bạn có thể sử dụng vòng đời thành phần góc $ onChanges .

xem tài liệu tại đây: https://docs.angularjs.org/guide/component trong phần ứng dụng dựa trên Thành phần

Viết một chiếc đồng hồ $ theo cú pháp ES6 không dễ như tôi mong đợi. Đây là những gì bạn có thể làm:

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

LƯU Ý : Điều này không hoạt động khi Chế độ xem và Bộ điều khiển được ghép nối trong một tuyến hoặc thông qua một đối tượng định nghĩa chỉ thị. Những gì hiển thị bên dưới chỉ hoạt động khi có "Một số Trình điều khiển là Một số Ctrl" trong HTML. Giống như Mark V. chỉ ra trong bình luận bên dưới, và như anh ấy nói rằng tốt hơn là làm như Bogdan làm điều đó.

Tôi sử dụng: var vm = this;vào đầu bộ điều khiển để tránh từ "này" theo cách của tôi. Sau đó vm.name = 'Max';và trong đồng hồ tôi return vm.name. Tôi sử dụng "vm" giống như @Bogdan sử dụng "tự". Var này, có thể là "vm" hoặc "self" là cần thiết vì từ "này" có một ngữ cảnh khác bên trong hàm. (vì vậy, trả lại this.name sẽ không hoạt động) Và vâng, bạn cần đưa $ scope vào giải pháp "điều khiển" đẹp mắt của mình để đạt được $ watch. Xem Hướng dẫn về Phong cách của 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);
    });
}

Dưới đây là cách bạn thực hiện việc này mà không có $ scope (và $ watch!) Top 5 sai lầm - Đồng hồ lạm dụng

Nếu bạn đang sử dụng cú pháp "trình điều khiển như", tốt hơn hết là tránh sử dụng $ scope.

Đây là mã của tôi trong JSFiddle . (Tôi đang sử dụng một dịch vụ để giữ tên, nếu không, bộ ES5 Object.defineProperty và các phương thức gây ra các cuộc gọi vô hạn.

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