ดูแอตทริบิวต์ $ scope หลายรายการ

มีวิธีในการสมัครสมาชิกกับเหตุการณ์ในการใช้วัตถุหลายอย่าง $watch

เช่น

$scope.$watch('item1, item2', function () { });

เริ่มต้นจาก AngularJS 1.3 มีวิธีการใหม่ที่เรียกว่า$watchGroupการสังเกตชุดของการแสดงออก

$scope.foo = 'foo';
$scope.bar = 'bar';

$scope.$watchGroup(['foo', 'bar'], function(newValues, oldValues, scope) {
  // newValues array contains the current values of the watch expressions
  // with the indexes matching those of the watchExpression array
  // i.e.
  // newValues[0] -> $scope.foo 
  // and 
  // newValues[1] -> $scope.bar 
});

เริ่มต้นด้วย AngularJS 1.1.4 คุณสามารถใช้$watchCollection:

$scope.$watchCollection('[item1, item2]', function(newValues, oldValues){
    // do stuff here
    // newValues and oldValues contain the new and respectively old value
    // of the observed collection array
});

ตัวอย่างเสียงพลั่วที่นี่

เอกสารที่นี่

$watch พารามิเตอร์แรกสามารถเป็นฟังก์ชันได้

$scope.$watch(function watchBothItems() {
  return itemsCombinedValue();
}, function whenItemsChange() {
  //stuff
});

หากค่าที่รวมกันสองค่าของคุณเป็นแบบง่ายพารามิเตอร์แรกจะเป็นเพียงการแสดงออกเชิงมุมตามปกติ ตัวอย่างเช่นชื่อและนามสกุล:

$scope.$watch('firstName + lastName', function() {
  //stuff
});

นี่คือวิธีการแก้ปัญหาที่คล้ายกับหลอกรหัสต้นฉบับของคุณที่ใช้งานได้จริง:

$scope.$watch('[item1, item2] | json', function () { });

แก้ไข:โอเคฉันคิดว่านี่จะดีกว่า:

$scope.$watch('[item1, item2]', function () { }, true);

โดยพื้นฐานแล้วเรากำลังข้ามขั้นตอน json ซึ่งดูเหมือนจะเป็นใบ้ แต่เริ่มต้นไม่ได้หากไม่มีมัน คีย์เหล่านี้เป็นพารามิเตอร์ตัวที่ 3 ที่มักถูกละเว้นซึ่งจะเปิดใช้งานความเท่าเทียมกันของวัตถุเมื่อเทียบกับความเท่าเทียมกันอ้างอิง จากนั้นการเปรียบเทียบระหว่างวัตถุอาร์เรย์ที่เราสร้างขึ้นนั้นทำงานได้จริง

คุณสามารถใช้ฟังก์ชั่นใน $ watchGroup เพื่อเลือกฟิลด์ของวัตถุในขอบเขต

        $scope.$watchGroup(
        [function () { return _this.$scope.ViewModel.Monitor1Scale; },   
         function () { return _this.$scope.ViewModel.Monitor2Scale; }],  
         function (newVal, oldVal, scope) 
         {
             if (newVal != oldVal) {
                 _this.updateMonitorScales();
             }
         });

ทำไมไม่ห่อมันด้วยforEach?

angular.forEach(['a', 'b', 'c'], function (key) {
  scope.$watch(key, function (v) {
    changed();
  });
});

มันเป็นเรื่องของค่าใช้จ่ายเช่นเดียวกับการให้บริการฟังก์ชั่นสำหรับค่ารวมกัน, ไม่จริงต้องกังวลเกี่ยวกับองค์ประกอบค่า

วิธีที่ปลอดภัยกว่าเล็กน้อยในการรวมค่าอาจจะใช้สิ่งต่อไปนี้เป็น$watchฟังก์ชั่นของคุณ:

function() { return angular.toJson([item1, item2]) }

หรือ

$scope.$watch(
  function() {
    return angular.toJson([item1, item2]);
  },
  function() {
    // Stuff to do after either value changes
  });

$ watch พารามิเตอร์ตัวแรกอาจเป็นนิพจน์หรือฟังก์ชันเชิงมุม ดูเอกสารเกี่ยวกับ$ ขอบเขต. $ นาฬิกา มันมีข้อมูลที่เป็นประโยชน์มากมายเกี่ยวกับวิธีการทำงานของ $ watch: เมื่อมีการเรียกใช้ watch expression การเปรียบเทียบผลเชิงมุมเป็นต้น

เกี่ยวกับ:

scope.$watch(function() { 
   return { 
      a: thing-one, 
      b: thing-two, 
      c: red-fish, 
      d: blue-fish 
   }; 
}, listener...);

$scope.$watch('age + name', function () {
  //called when name or age changed
});

ฟังก์ชั่นที่นี่จะได้รับการเรียกเมื่อทั้งอายุและมูลค่าของชื่อได้รับการเปลี่ยนแปลง

Angular นำมาใช้$watchGroupในเวอร์ชั่น 1.3 ซึ่งเราสามารถรับชมตัวแปรหลาย ๆ ตัวพร้อมกับ$watchGroupบล็อก เดียว$watchGroupจะใช้อาร์เรย์เป็นพารามิเตอร์แรกที่เราสามารถรวมตัวแปรทั้งหมดของเราเพื่อรับชม

$scope.$watchGroup(['var1','var2'],function(newVals,oldVals){
   console.log("new value of var1 = " newVals[0]);
   console.log("new value of var2 = " newVals[1]);
   console.log("old value of var1 = " oldVals[0]);
   console.log("old value of var2 = " oldVals[1]);
});