Xem nhiều thuộc tính phạm vi $

Có cách nào để đăng ký các sự kiện trên nhiều đối tượng bằng cách sử dụng $watch

Ví dụ

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

Bắt đầu từ AngularJS 1.3, có một phương thức mới được gọi là $watchGroupđể quan sát một tập hợp các biểu thức.

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

Bắt đầu với AngularJS 1.1.4, bạn có thể sử dụng $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
});

Ví dụ Plunker ở đây

Tài liệu ở đây

$watch tham số đầu tiên cũng có thể là một hàm.

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

Nếu hai giá trị kết hợp của bạn đơn giản, tham số đầu tiên chỉ là biểu thức góc bình thường. Ví dụ: FirstName và LastName:

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

Đây là một giải pháp rất giống với mã giả ban đầu của bạn thực sự hoạt động:

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

EDIT: Được rồi, tôi nghĩ điều này thậm chí còn tốt hơn:

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

Về cơ bản, chúng tôi bỏ qua bước json, có vẻ như bắt đầu ngu ngốc, nhưng nó không hoạt động mà không có nó. Khóa của chúng là tham số thứ 3 thường bị bỏ qua, bật tính bằng nhau của đối tượng trái ngược với đẳng thức tham chiếu. Sau đó, các so sánh giữa các đối tượng mảng được tạo của chúng tôi thực sự hoạt động đúng.

Bạn có thể sử dụng các hàm trong $ watchgroup để chọn các trường của một đối tượng trong phạm vi.

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

Tại sao không chỉ đơn giản là bọc nó trong một forEach?

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

Đó là về chi phí tương tự như việc cung cấp một hàm cho giá trị kết hợp, mà không thực sự phải lo lắng về thành phần giá trị .

Một giải pháp an toàn hơn một chút để kết hợp các giá trị có thể là sử dụng như sau dưới dạng $watchhàm của bạn :

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

hoặc là

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

$ xem tham số đầu tiên có thể là biểu thức góc hoặc hàm. Xem tài liệu về $ scope. $ Watch . Nó chứa rất nhiều thông tin hữu ích về cách phương thức $ watch hoạt động: khi watchExpression được gọi, cách so sánh kết quả, v.v.

làm thế nào về:

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

Ở đây hàm sẽ được gọi khi cả giá trị tuổi và tên được thay đổi.

Angular được giới thiệu $watchGrouptrong phiên bản 1.3 sử dụng chúng ta có thể xem nhiều biến, với một $watchGroupkhối duy nhất $watchGrouplấy mảng làm tham số đầu tiên trong đó chúng ta có thể bao gồm tất cả các biến để xem.

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