Các controllerchức năng / đối tượng đại diện cho một sự trừu tượng MVC (MVC). Mặc dù không có gì mới để viết về MVC, nhưng đây vẫn là một ưu điểm quan trọng nhất của góc cạnh: chia các mối quan tâm thành các phần nhỏ hơn. Và đó là nó, không có gì hơn, vì vậy nếu bạn cần để phản ứng về Modelnhững thay đổi đến từ Viewnhững Controllerlà quyền con người để làm công việc đó.
Câu chuyện về linkchức năng là khác nhau, nó đến từ quan điểm khác nhau sau đó là MVC. Và thực sự cần thiết, một khi chúng ta muốn vượt qua ranh giới của một controller/model/view (mẫu) .
Hãy bắt đầu với các tham số được truyền vào linkhàm:
function link(scope, element, attrs) {
- phạm vi là một đối tượng phạm vi góc.
- phần tử là phần tử được bọc jqLite mà lệnh này khớp.
- attrs là một đối tượng có tên thuộc tính được chuẩn hóa và các giá trị tương ứng của chúng.
Để đưa linkvào bối cảnh, chúng ta nên đề cập rằng tất cả các chỉ thị đang trải qua các bước quy trình khởi tạo này: Biên dịch , Liên kết . Một trích đoạn từ cuốn sách Brad Green và Shyam Seshadri Angular JS :
Biên dịch pha (một người chị em của liên kết, hãy đề cập đến nó ở đây để có được một hình ảnh rõ ràng):
Trong giai đoạn này, Angular đi bộ DOM để xác định tất cả các chỉ thị đã đăng ký trong mẫu. Đối với mỗi lệnh, sau đó nó biến đổi DOM dựa trên các quy tắc của lệnh (khuôn mẫu, thay thế, chuyển mã, v.v.) và gọi hàm biên dịch nếu nó tồn tại. Kết quả là một hàm mẫu được biên dịch,
Liên kết giai đoạn :
Để làm cho khung nhìn động, Angular sau đó chạy một hàm liên kết cho mỗi lệnh. Các hàm liên kết thường tạo các trình nghe trên DOM hoặc mô hình. Những người nghe này giữ cho quan điểm và mô hình đồng bộ mọi lúc.
Một ví dụ hay về cách sử dụng linkcó thể tìm thấy ở đây: Tạo Chỉ thị tùy chỉnh . Xem ví dụ: Tạo Chỉ thị Thao tác DOM , chèn "ngày giờ" vào trang, được làm mới mỗi giây.
Chỉ là một đoạn rất ngắn từ nguồn phong phú đó ở trên, cho thấy sự thao túng thực sự với DOM. Có chức năng được nối với dịch vụ $ timeout, và nó cũng bị xóa trong lệnh gọi hàm hủy của nó để tránh rò rỉ bộ nhớ
.directive('myCurrentTime', function($timeout, dateFilter) {
function link(scope, element, attrs) {
...
// the not MVC job must be done
function updateTime() {
element.text(dateFilter(new Date(), format)); // here we are manipulating the DOM
}
function scheduleUpdate() {
// save the timeoutId for canceling
timeoutId = $timeout(function() {
updateTime(); // update DOM
scheduleUpdate(); // schedule the next update
}, 1000);
}
element.on('$destroy', function() {
$timeout.cancel(timeoutId);
});
...
$watch,$digestvà$apply. "?