Làm thế nào để liên kết và tiêu hóa hoạt động trong AngularJS?

Một điều làm nên sự khác biệt của AngularJS với các khung JavaScript-MVC khác là khả năng lặp lại các giá trị bị ràng buộc từ JavaScript sang HTML bằng cách sử dụng các liên kết. Angular thực hiện điều này "tự động" khi bạn gán bất kỳ giá trị nào cho biến $ scope.

Nhưng làm thế nào tự động là điều này? Đôi khi, Angular sẽ không thực hiện thay đổi, vì vậy tôi cần gọi $ scope. $ Apply () hoặc $ scope. $ Digan () để thông báo cho angle nhận thay đổi. Đôi khi khi tôi chạy một trong hai phương thức đó thì nó báo lỗi và thông báo rằng một thông báo đã được xử lý.

Vì các liên kết (bất kỳ thứ gì bên trong dấu ngoặc nhọn {{}} hoặc ng-thuộc tính) được lặp lại với eval nên điều này có nghĩa là Angular liên tục thăm dò đối tượng $ scope để tìm kiếm các thay đổi và sau đó thực hiện eval để đẩy các thay đổi đó vào DOM / HTML? Hoặc AngularJS bằng cách nào đó đã tìm ra cách sử dụng các biến ma thuật để kích hoạt các sự kiện được kích hoạt khi một giá trị biến thay đổi hoặc được gán? Tôi chưa bao giờ nghe nói về việc nó được hỗ trợ đầy đủ bởi tất cả các trình duyệt, vì vậy tôi nghi ngờ điều đó.

AngularJS theo dõi các ràng buộc và các biến phạm vi của nó như thế nào?

Ngoài phần tài liệu do Mark tìm thấy, tôi nghĩ chúng ta có thể cố gắng liệt kê tất cả các nguồn thay đổi có thể có.

1. Tương tác của người dùng với đầu vào HTML ( 'văn bản' , 'số' , 'url' , 'email' , 'radio' , 'hộp kiểm' ). AngularJS có inputDirective . Các đầu vào 'văn bản', 'số', 'url' và 'email' ràng buộc trình xử lý trình xử lý cho các sự kiện 'đầu vào' hoặc 'phím xuống'. Phạm vi cuộc gọi của trình xử lý trình xử lý . $ Áp dụng . 'radio' và 'checkbox' liên kết trình xử lý tương tự cho sự kiện nhấp chuột.
2. Tương tác của người dùng với phần tử được chọn. AngularJS có selectDirective với hành vi tương tự trên sự kiện 'thay đổi'.
3. Các thay đổi định kỳ bằng cách sử dụng dịch vụ $ timeout cũng do $ rootScope. $ Apply () .
4. eventDirectives (ngClick, v.v.) cũng sử dụng phạm vi. $ áp dụng .
5. $ http cũng sử dụng $ rootScope. $ apply () .
6. Những thay đổi bên ngoài thế giới AngularJS nên sử dụng phạm vi. $ Áp dụng như bạn biết.

Như bạn đã phát hiện ra, nó không phải là thăm dò mà là sử dụng vòng lặp thực thi nội bộ, vì vậy đó là lý do tại sao bạn cần sử dụng $ apply () hoặc $ digan () để đưa mọi thứ vào chuyển động.

Lời giải thích của Miško khá cặn kẽ , nhưng còn thiếu một chút là Angular chỉ đang cố gắng làm cho $ scope trở lại trạng thái bên trong rõ ràng bất cứ khi nào có bất cứ điều gì xảy ra trong ngữ cảnh của chính nó. Điều này có thể mất khá nhiều thời gian giữa các trạng thái của mô hình, vì vậy đó cũng là lý do tại sao bạn không thể dựa vào việc $ watch () chỉ kích hoạt một lần và cũng là lý do tại sao bạn nên cẩn thận với việc thiết lập thủ công quan hệ giữa các mô hình, nếu không bạn sẽ kết thúc làm mới vòng tròn.