AngularJS: tự động phát hiện thay đổi trong mô hình

Giả sử tôi muốn làm điều gì đó như tự động chạy một số mã (như lưu dữ liệu vào máy chủ) bất cứ khi nào giá trị của mô hình thay đổi. Có phải cách duy nhất để làm điều này bằng cách đặt một cái gì đó như ng-changetrên mỗi điều khiển có thể thay đổi mô hình không?

Tức là, với quan điểm, mọi thứ thay đổi ngay khi mô hình được thay đổi mà không cần phải kết nối rõ ràng bất cứ điều gì. Có cách nào để có thể chạy mã lưu vào máy chủ không? Cái gì đó như

myModel.on('change', function() {
  $.post("/my-url", ...);
});

như bạn có thể thấy với một cái gì đó giống như xương sống.

Trong các chế độ xem với {{}}và / hoặc ng-model, Angular đang thiết lập các góc $watch()cho bạn ở hậu trường.

Theo mặc định $watchso sánh theo tham chiếu. Nếu bạn đặt tham số thứ ba $watchthành true, Angular thay vào đó sẽ "nông" theo dõi đối tượng để biết các thay đổi. Đối với mảng, điều này có nghĩa là so sánh các mục của mảng, đối với bản đồ đối tượng, điều này có nghĩa là xem các thuộc tính. Vì vậy, điều này sẽ làm những gì bạn muốn:

$scope.$watch('myModel', function() { ... }, true);

Cập nhật : Angular v1.2 đã thêm một phương thức mới cho việc này, `$ watchCollection () :

$scope.$watchCollection('myModel', function() { ... });

Lưu ý rằng từ "cạn" được sử dụng để mô tả so sánh hơn là "sâu" vì tham chiếu không được theo sau - ví dụ: nếu đối tượng được theo dõi có chứa giá trị thuộc tính là tham chiếu đến đối tượng khác, tham chiếu đó không được theo sau để so sánh đối tượng kia.

Và nếu bạn cần tạo kiểu động cho các phần tử biểu mẫu của mình theo trạng thái của nó (đã sửa đổi / không sửa đổi) hoặc để kiểm tra xem một số giá trị đã thực sự thay đổi hay chưa, bạn có thể sử dụng mô-đun sau do chính tôi phát triển: https://github.com/betsol / angle-input-mod

Nó thêm các thuộc tính và phương thức bổ sung vào biểu mẫu và đó là các phần tử con. Với nó, bạn có thể kiểm tra xem một số phần tử có chứa dữ liệu mới hoặc thậm chí kiểm tra xem toàn bộ biểu mẫu có dữ liệu mới chưa được lưu hay không.

Bạn có thể thiết lập đồng hồ sau: $scope.$watch('myForm.modified', handler)và trình xử lý của bạn sẽ được gọi nếu một số phần tử biểu mẫu thực sự chứa dữ liệu mới hoặc nếu nó được đảo ngược về trạng thái ban đầu.

Ngoài ra, bạn có thể sử dụng modifiedthuộc tính của các phần tử biểu mẫu riêng lẻ để thực sự giảm lượng dữ liệu được gửi đến máy chủ thông qua lệnh gọi AJAX. Không cần phải gửi dữ liệu không thay đổi.

Như một phần thưởng, bạn có thể hoàn nguyên biểu mẫu của mình về trạng thái ban đầu thông qua reset()phương thức gọi đến biểu mẫu .

Bạn có thể tìm thấy bản demo của mô-đun tại đây: http://plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

Chúc mừng!