Sử dụng `this. $ Watch` thay vì` $ scope. $ Watch` với 'Controller As'

Question

Hiện tại tôi đang sử dụng định dạng Controller As cho bộ điều khiển phạm vi.

Điều này phù hợp để giữ phạm vi giá trị trên các chế độ xem rõ ràng và dễ theo dõi.

<div ng-app="myApp" ng-controller="myController as myctrl"> 
    <ul> 
     <li ng-repeat="contact in myctrl.contacts"> 
      <input type="text" ng-model="contact.name.first" /> 
     </li> 
    </ul> 
</div> 

Tuy nhiên, khi thực hiện một $watch Tôi đang chạy vào vấn đề vì nó có vẻ là phụ thuộc vào $scope nên sau đây sẽ không hoạt động.

angular.module('myApp',[]) 
.controller('myController',['contacts',function(contacts) { 
    this.contacts = contacts; 

    this.$watch('contacts', function(newValue, oldValue) { 
     console.log({older: oldValue, newer:newValue}); 
    }); 

}]); 

tôi nhận được không xác định không phải là một chức năng trong tài liệu tham khảo để this không có một phương pháp $watch.

Có cách nào để $watch giá trị với định dạng Controller As không?

JS Fiddle

Answer 1

Ngay cả với định dạng controllerAs, các $scope là ở đó.

Thực tế, những gì controllerAs thực hiện là ràng buộc đối tượng bộ điều khiển this với phạm vi $.
Ví dụ: controller="myController as myctrl" (phía sau hậu trường): $scope.myctrl = this (trong đó this đề cập đến trường hợp myController).

Vì vậy, bạn chỉ có thể tiêm và sử dụng $scope cho đồng hồ:

.controller('myController', function ($scope, contacts) { 
    this.contacts = contacts; 

    $scope.$watch(function() { 
     return contacts; 
    }, function (newValue, oldValue) {...}); 
}); 

Answer 2

$scope.$watch("contact", callback, true) // true makes it a deep/recursive watch 

Answer 3

Hãy thử điều này,

$scope.$watch(angular.bind(this, function() { 
      return this.contacts; 
     }), function (newValue, oldValue) { 
      console.log((newValue + ' - ' + oldValue)); 
     }); 

Answer 4

khác bằng văn bản rõ ràng về việc tại sao $ phạm vi thường vẫn yêu cầu. Nhưng không phải làm thế nào để thực sự xem các biến của bạn trong trường hợp ví dụ của bạn để xem đúng "địa chỉ liên lạc" biến địa phương, bạn phải xác định nó bằng không gian tên bộ điều khiển.

Vì vậy:

$scope.$watch('myctrl.contacts', function(newValue, oldValue) { 
     console.log({older: oldValue, newer:newValue}); 
    }); 

Ý tưởng của việc sử dụng không gian tên địa phương là để ngăn chặn đột biến nếu bạn tạo bộ điều khiển con bên trong bộ điều khiển khác. Lợi ích tốt đẹp của điều này là một bộ điều khiển cha mẹ có thể xem tất cả các khoảng trống bên trong phạm vi của nó.

Cho phép nói rằng html ban đầu nhìn cái gì đó như:

<div ng-app="myApp" ng-controller="myController as myctrl"> 
    <div ng-controller="listController as mylist"> 
    <ul> 
     <li ng-repeat="contact in myctrl.contacts"> 
      <input type="text" ng-model="contact.name.first" /> 
     </li> 
    </ul> 
    </div> 
</div> 

và js:

angular.module('myApp',[]) 
.controller('myController',['$scope',function(contacts) { 

    $scope.$watch('mylist.contacts', function(newValue, oldValue) { 
     console.log({older: oldValue, newer:newValue}); 
    }) 
.controller('listController',['contacts',function(contacts) { 
    this.contacts = contacts; 
    }); 
}]); 

Bây giờ điều khiển chính đang theo dõi hoạt động trong một bộ điều khiển lồng nhau ... tiện lợi khá.