Để minh họa cách $ đồng hồ(), $ digest() và $ apply() công trình, hãy nhìn vào ví dụ này:
<div ng-controller="myController">
{{data.time}}
<br/>
<button ng-click="updateTime()">update time - ng-click</button>
<button id="updateTimeButton" >update time</button>
</div>
<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController", function($scope) {
$scope.data = { time : new Date() };
$scope.updateTime = function() {
$scope.data.time = new Date();
}
document.getElementById("updateTimeButton")
.addEventListener('click', function() {
console.log("update time clicked");
$scope.data.time = new Date();
});
});
</script>
Ví dụ này liên kết với biến $ scope.data.time đến một chỉ thị suy hợp nhất giá trị biến vào trang HTML. Ràng buộc này tạo ra một chiếc đồng hồ nội bộ trên biến $ scope.data.time.
Ví dụ này cũng chứa hai nút. Nút đầu tiên có trình nghe ng-click gắn liền với nó. Khi nhấn nút đó, hàm $ scope.updateTime() được gọi, và sau đó AngularJS gọi $ scope. $ Digest() để các ràng buộc dữ liệu được cập nhật.
Nút thứ hai nhận trình xử lý sự kiện JavaScript chuẩn được đính kèm với nó từ bên trong chức năng điều khiển. Khi nút thứ hai được bấm, chức năng nghe được thực thi. Như bạn có thể thấy, các chức năng nghe cho cả hai nút gần như giống nhau, nhưng khi chức năng nghe của nút thứ hai được gọi, thì ràng buộc dữ liệu không được cập nhật. Đó là vì $ scope. $ Digest() không được gọi sau khi trình nghe sự kiện của nút thứ hai được thực hiện. Do đó, nếu bạn nhấp vào nút thứ hai, thời gian sẽ được cập nhật trong biến $ scope.data.time, nhưng thời gian mới sẽ không bao giờ được hiển thị.
Để khắc phục điều đó chúng ta có thể thêm một phạm vi $ $ digest() gọi đến dòng cuối cùng của người nghe nút sự kiện, như thế này:.
document.getElementById("updateTimeButton")
.addEventListener('click', function() {
console.log("update time clicked");
$scope.data.time = new Date();
$scope.$digest();
});
Thay vì gọi $ tiêu hóa() bên trong nút nghe chức năng bạn cũng có thể đã sử dụng $ áp dụng() chức năng như thế này:.
document.getElementById("updateTimeButton")
.addEventListener('click', function() {
$scope.$apply(function() {
console.log("update time clicked");
$scope.data.time = new Date();
});
});
Thông báo như thế nào $ phạm vi $ apply() hàm được gọi từ bên trong nút sự kiện người nghe, và làm thế nào bản cập nhật của $ phạm vi Biến .data.time được thực hiện bên trong hàm được truyền làm tham số cho hàm $ apply(). Khi cuộc gọi hàm $ apply() kết thúc AngularJS gọi $ digest() trong nội bộ, vì vậy tất cả các ràng buộc dữ liệu được cập nhật.
Tôi khuyên bạn nên xem bài nói chuyện này từ ng-conf có tên ["Sasqatch is Real"] (https://www.youtube.com/watch?v=wbcJfg-d5nI). Nó nói về mọi thứ tạo ra một chiếc đồng hồ và cho thấy có bao nhiêu chiếc đồng hồ mà tầm nhìn bình thường của bạn có thể kết thúc và tác động đến việc có quá nhiều đồng hồ. – yvesmancera
Cảm ơn bạn đã liên kết - dường như là những gì tôi đang tìm kiếm. – LazerSharks