Angularjs: 'controller as syntax' และ $ watch

วิธีสมัครรับข้อมูลการเปลี่ยนแปลงคุณสมบัติเมื่อใช้controller asไวยากรณ์

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>  

เพียงผูกบริบทที่เกี่ยวข้อง

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

ตัวอย่าง: http://jsbin.com/yinadoce/1/edit

UPDATE:

คำตอบของ Bogdan Gersak นั้นเทียบเท่ากันจริง ๆ ทั้งสองคำตอบลองเชื่อมโยงthisกับบริบทที่เหมาะสม อย่างไรก็ตามฉันพบว่าคำตอบของเขาสะอาดขึ้น

มีที่กล่าวว่าเป็นครั้งแรกและสำคัญที่สุดที่คุณต้องเข้าใจความคิดพื้นฐานที่อยู่เบื้องหลังมัน

อัปเดต 2:

สำหรับผู้ที่ใช้ ES6 โดยใช้arrow functionคุณได้รับฟังก์ชั่นที่มีบริบทที่ถูกต้อง OOTB

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

ตัวอย่าง

ฉันมักจะทำสิ่งนี้:

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

คุณสามารถใช้ได้:

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

นี่ใช้งานได้JSFiddleกับตัวอย่างของคุณ

เช่นเดียวกับการใช้ "test" จาก "TestCtrl เป็นการทดสอบ" ตามที่อธิบายไว้ในคำตอบอื่นคุณสามารถกำหนดขอบเขต "ของคุณ" ด้วยตนเอง:

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

ด้วยวิธีนี้คุณจะไม่เชื่อมโยงกับชื่อที่ระบุใน DOM ("TestCtrl เป็นการทดสอบ") และคุณยังหลีกเลี่ยงความจำเป็นที่จะต้องผูก (สิ่งนี้) กับฟังก์ชัน

... เพื่อใช้กับ 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 รองรับการเริ่มต้น $ ctrl สำหรับโครงสร้าง ControllerAs

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

คุณสามารถส่งผ่านฟังก์ชั่นเป็นอาร์กิวเมนต์แรกของ $ watch ():

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

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

ซึ่งหมายความว่าเราสามารถส่งคืนชื่ออ้างอิงนี้ของเรา:

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

อ่านโพสต์ที่น่าสนใจเกี่ยวกับหัวข้อ controllerAs https://toddmotto.com/digging-into-angulars-controller-as-syntax/

คุณสามารถใช้$ onChangesส่วนประกอบเชิงมุม

โปรดดูเอกสารที่นี่: https://docs.angularjs.org/guide/component ภายใต้การประยุกต์ใช้ชิ้นส่วนตามส่วน

การเขียน $ watch ในไวยากรณ์ ES6 นั้นไม่ง่ายอย่างที่ฉันคาดไว้ นี่คือสิ่งที่คุณสามารถทำได้:

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

หมายเหตุ : สิ่งนี้จะไม่ทำงานเมื่อ View และ Controller เชื่อมต่อกันในเส้นทางหรือผ่านวัตถุนิยามแบบ directive สิ่งที่แสดงด้านล่างจะใช้งานได้เฉพาะเมื่อมี "SomeController as SomeCtrl" ใน HTML เช่นเดียวกับ Mark V. ชี้ให้เห็นในความคิดเห็นด้านล่างและเช่นเดียวกับที่เขาบอกว่ามันจะดีกว่าที่จะทำเช่น Bogdan

ฉันใช้: var vm = this;ในการเริ่มต้นของตัวควบคุมเพื่อให้ได้คำว่า "นี่" ออกไปจากทางของฉัน แล้วและนาฬิกาฉันvm.name = 'Max'; return vm.nameฉันใช้ "vm" เหมือนกับ @Bogdan ใช้ "self" var นี้ไม่ว่าจะเป็น "vm" หรือ "self" เป็นสิ่งจำเป็นเนื่องจากคำว่า "this" ใช้กับบริบทที่แตกต่างกันภายในฟังก์ชัน (ดังนั้นการส่งคืนชื่อนี้จะไม่ทำงาน) และใช่คุณต้องฉีด $ scope ในโซลูชัน "controller as" ที่สวยงามเพื่อให้ได้ $ watch ดูคู่มือสไตล์ของ 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);
    });
}

นี่คือวิธีที่คุณทำโดยไม่มี $ scope (และ $ watch!) ข้อผิดพลาด 5 อันดับแรก - การดูที่ไม่เหมาะสม

หากคุณใช้ไวยากรณ์ "controller as" จะดีกว่าและสะอาดกว่าเพื่อหลีกเลี่ยงการใช้ $ scope

นี่คือรหัสของฉันในJSFiddle (ฉันใช้บริการเพื่อเก็บชื่อมิฉะนั้นชุด ES5 Object.defineProperty และรับวิธีทำให้เกิดการโทรไม่สิ้นสุด

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