$ đồng hồ không được kích hoạt khi thay đổi mảng

Question

Tôi đang cố gắng tìm ra lý do tại sao $watch của tôi không được kích hoạt. Đây là một đoạn trích từ bộ điều khiển có liên quan:

$scope.$watch('tasks', function (newValue, oldValue) { 
    //do some stuff 
    //only enters here once 
    //newValue and oldValue are equal at that point 
}); 

$scope.tasks = tasksService.tasks(); 

$scope.addTask = function (taskCreationString) { 
    tasksService.addTask(taskCreationString);//modifies tasks array 
}; 

Theo quan điểm của tôi, tasks được rõ ràng đang được cập nhật một cách chính xác như tôi đã chiều dài của nó bị ràng buộc như vậy:

<span>There are {{tasks.length}} total tasks</span> 

tôi đang thiếu gì?

Answer 1

Hãy thử $watch('tasks.length', ...) hoặc $watch('tasks', function(...) { ... }, true).

Theo mặc định, $watch không kiểm tra đối tượng bình đẳng, nhưng chỉ để tham khảo. Vì vậy, $watch('tasks', ...) sẽ luôn đơn giản trả về cùng một tham chiếu mảng, không thay đổi.

Cập nhật: v1.1.4 Góc cho biết thêm một phương pháp $watchCollection() để xử lý trường hợp này:

Shallow đồng hồ các thuộc tính của một đối tượng và cháy bất cứ khi nào bất kỳ thuộc tính thay đổi (đối với mảng này ngụ ý theo dõi mảng các mục, đối với các bản đồ đối tượng, điều này ngụ ý xem các thuộc tính). Nếu phát hiện thay đổi, cuộc gọi lại listener bị kích hoạt.

Answer 2

Câu trả lời rất hay bởi @Mark. Ngoài câu trả lời của mình, có một chức năng quan trọng của hàm $watch mà bạn cần biết.

Với việc kê khai $watch chức năng như sau:

$watch(watch_expression, listener, objectEquality) 

Các $watchnghe hàm được gọi chỉ khi giá trị cường độ dòng điện đồng hồ biểu (trong trường hợp của bạn nó là 'tasks') và các cuộc gọi trước đến biểu thức đồng hồ không bằng nhau. Góc giúp tiết kiệm giá trị của đối tượng để so sánh sau này. Do đó, việc xem các tùy chọn phức tạp sẽ có những tác động bất lợi và bộ nhớ. Về cơ bản, biểu thức xem đơn giản hơn giá trị càng tốt.

Answer 3

Tôi muốn giới thiệu cố gắng

$scope.$watch('tasks | json', ...) 

Đó sẽ bắt tất cả các thay đổi đối với mảng tasks, vì nó so sánh mảng serialized như là một chuỗi.

Answer 4

Đối với một mảng chiều bạn có thể sử dụng $watchCollection

$scope.names = ['igor', 'matias', 'misko', 'james']; 
$scope.dataCount = 4; 

$scope.$watchCollection('names', function(newNames, oldNames) { 
    $scope.dataCount = newNames.length; 
});