Tôi đập đầu vào tường trong vài ngày và tôi cảm thấy có thêm một chút giải thích.
Về cơ bản, các tài liệu đề cập rằng sự tách biệt phần lớn là nâng cao hiệu suất. Tôi xin nhắc lại rằng giai đoạn biên dịch chủ yếu được sử dụng khi bạn cần sửa đổi DOM TRƯỚC KHI các phần tử con được biên dịch.
Đối với mục đích của chúng tôi, tôi sẽ nhấn mạnh thuật ngữ, điều này gây nhầm lẫn:
Trình biên dịch DỊCH VỤ ($ compile) là cơ chế góc xử lý DOM và chạy các bit mã khác nhau trong các lệnh.
FUNCTION biên dịch là một bit mã trong một lệnh, được chạy tại một thời điểm cụ thể B BYNG trình biên dịch DỊCH VỤ ($ compile).
Một số lưu ý về CHỨC NĂNG biên dịch:
Bạn không thể sửa đổi phần tử ROOT (chỉ thị của bạn ảnh hưởng), vì phần tử này đã được biên dịch từ cấp độ bên ngoài của DOM (DỊCH VỤ biên dịch đã được quét các chỉ thị trên phần tử đó).
Nếu bạn muốn thêm các chỉ thị khác vào các phần tử (lồng nhau), bạn cũng:
Phải thêm chúng trong giai đoạn biên dịch.
Phải tiêm dịch vụ biên dịch vào giai đoạn liên kết và biên dịch các phần tử theo cách thủ công. NHƯNG, hãy cẩn thận với việc biên dịch một cái gì đó hai lần!
Cũng rất hữu ích khi xem cách các lệnh gọi lồng nhau và rõ ràng đến $ compile hoạt động, vì vậy tôi đã tạo một sân chơi để xem tại http://jsbin.com/imUPAMoV/1/edit . Về cơ bản, nó chỉ ghi nhật ký các bước vào console.log.
Tôi sẽ nêu kết quả của những gì bạn thấy trong thùng đó ở đây. Đối với một DOM của các chỉ thị tùy chỉnh tp và sp lồng nhau như sau:
<tp>
<sp>
</sp>
</tp>
DỊCH VỤ biên dịch góc sẽ gọi:
tp compile
sp compile
tp pre-link
sp pre-link
sp post-link
tp post-link
Mã jsbin cũng có CHỨC NĂNG hậu liên kết tp gọi rõ ràng DỊCH VỤ biên dịch theo lệnh thứ ba (lên), thực hiện cả ba bước ở cuối.
Bây giờ, tôi muốn xem qua một vài tình huống để cho thấy cách người ta có thể sử dụng trình biên dịch và liên kết để làm nhiều việc khác nhau:
SCENARIO 1: Chỉ thị là MACRO
Bạn muốn thêm một lệnh (nói ng-show) một cách linh hoạt vào một cái gì đó trong mẫu của bạn mà bạn có thể rút ra từ một thuộc tính.
Giả sử bạn có một templateUrl trỏ đến:
<div><span><input type="text"></span><div>
và bạn muốn có một chỉ thị tùy chỉnh:
<my-field model="state" name="address"></my-field>
biến DOM thành thế này:
<div><span ng-show="state.visible.address"><input ng-model="state.fields.address" ...>
về cơ bản, bạn muốn giảm nồi hơi bằng cách có một số cấu trúc mô hình nhất quán mà chỉ thị của bạn có thể diễn giải. Nói cách khác: bạn muốn một macro.
Đây là một cách sử dụng tuyệt vời cho giai đoạn biên dịch, vì bạn có thể dựa trên tất cả các thao tác DOM trên những thứ bạn biết chỉ từ các thuộc tính. Chỉ cần sử dụng jQuery để thêm các thuộc tính:
compile: function(tele, tattr) {
var span = jQuery(tele).find('span').first();
span.attr('ng-show', tattr.model + ".visible." + tattr.name);
...
return {
pre: function() { },
post: function() {}
};
}
Trình tự các hoạt động sẽ là (bạn có thể thấy điều này thông qua jsbin đã đề cập trước đó):
- DỊCH VỤ biên dịch tìm trường của tôi
- Nó gọi FUNCTION biên dịch trên lệnh, cập nhật DOM.
- Sau đó, dịch vụ biên dịch đi vào DOM kết quả và TÍNH TOÁN (đệ quy)
- DỊCH VỤ biên dịch sau đó gọi từ trên xuống liên kết từ trên xuống
- DỊCH VỤ biên dịch sau đó gọi BOTTOM LÊN sau liên kết, do đó chức năng liên kết của trường của tôi được gọi là các nút bên trong SAU đã được liên kết.
Trong ví dụ trên, không cần liên kết, vì tất cả các công việc của chỉ thị đã được thực hiện trong việc biên dịch FUNCTION.
Tại bất kỳ thời điểm nào, mã trong một lệnh có thể yêu cầu trình biên dịch DỊCH VỤ chạy trên các phần tử bổ sung.
Điều này có nghĩa là chúng ta có thể thực hiện chính xác điều tương tự trong hàm liên kết nếu bạn tiêm dịch vụ biên dịch:
directive('d', function($compile) {
return {
// REMEMBER, link is called AFTER nested elements have been compiled and linked!
link: function(scope, iele, iattr) {
var span = jQuery(iele).find('span').first();
span.attr('ng-show', iattr.model + ".visible." + iattr.name);
// CAREFUL! If span had directives on it before
// you will cause them to be processed again:
$compile(span)(scope);
}
});
Nếu bạn chắc chắn rằng các phần tử bạn chuyển đến $ compile DỊCH VỤ ban đầu không có chỉ thị (ví dụ: chúng đến từ một mẫu bạn đã xác định hoặc bạn chỉ tạo chúng với angular.element ()), thì kết quả cuối cùng là khá nhiều giống như trước đây (mặc dù bạn có thể lặp lại một số công việc). Tuy nhiên, nếu phần tử có các chỉ thị khác trên đó, bạn chỉ khiến chúng bị xử lý lại, điều này có thể gây ra tất cả các loại hành vi thất thường (ví dụ: đăng ký kép các sự kiện và đồng hồ).
Do đó, giai đoạn biên dịch là một lựa chọn tốt hơn nhiều cho công việc theo phong cách vĩ mô.
SCENARIO 2: Cấu hình DOM thông qua dữ liệu phạm vi
Điều này sau từ ví dụ trên. Giả sử bạn cần truy cập vào phạm vi trong khi thao tác DOM. Chà, trong trường hợp đó, phần biên dịch là vô dụng đối với bạn, vì nó xảy ra trước khi một phạm vi có sẵn.
Vì vậy, giả sử bạn muốn tìm ra đầu vào có xác nhận, nhưng bạn muốn xuất xác thực của mình từ lớp ORM phía máy chủ (DRY) và để chúng tự động áp dụng và tạo UI phía máy khách phù hợp cho các xác nhận hợp lệ đó.
Mô hình của bạn có thể đẩy:
scope.metadata = {
validations: {
address: [ {
pattern: '^[0-9]',
message: "Address must begin with a number"
},
{ maxlength: 100,
message: "Address too long"
} ]
}
};
scope.state = {
address: '123 Fern Dr'
};
và bạn có thể muốn một chỉ thị:
<form name="theForm">
<my-field model="state" metadata="metadata" name="address">
</form>
để tự động bao gồm các chỉ thị và div phù hợp để hiển thị các lỗi xác thực khác nhau:
<form name="theForm">
<div>
<input ng-model="state.address" type="text">
<div ng-show="theForm.address.$error.pattern">Address must begin with a number</input>
...
Trong trường hợp này, bạn chắc chắn cần truy cập vào phạm vi (vì đó là nơi lưu trữ xác thực của bạn) và sẽ phải biên dịch các bổ sung theo cách thủ công, một lần nữa cẩn thận không biên dịch hai thứ. (như một ghi chú bên cạnh, bạn sẽ cần đặt tên trên thẻ biểu mẫu có chứa (Tôi giả sử theForm ở đây) và có thể truy cập nó trong liên kết với iEuity.parent (). control ('form'). $ name) .
Trong trường hợp này, không có điểm nào trong việc viết một hàm biên dịch. Liên kết thực sự là những gì bạn muốn. Các bước sẽ là:
- Xác định một mẫu hoàn toàn không có các chỉ thị góc.
- Xác định hàm liên kết có thêm các thuộc tính khác nhau
- XÓA bất kỳ chỉ thị góc nào mà bạn có thể cho phép trên phần tử cấp cao nhất của mình (chỉ thị trường của tôi). Chúng đã được xử lý và đây là một cách để giữ cho chúng không bị xử lý kép.
- Kết thúc bằng cách gọi DỊCH VỤ biên dịch trên phần tử cấp cao nhất của bạn
Thích như vậy:
angular.module('app', []).
directive('my-field', function($compile) {
return {
link: function(scope, iele, iattr) {
// jquery additions via attr()
// remove ng attr from top-level iele (to avoid duplicate processing)
$compile(iele)(scope); // will pick up additions
}
};
});
Tất nhiên, bạn có thể biên dịch từng phần tử lồng nhau để tránh phải lo lắng về việc xử lý trùng lặp các lệnh ng khi bạn biên dịch lại phần tử cấp cao nhất.
Một lưu ý cuối cùng về kịch bản này: Tôi ngụ ý rằng bạn sẽ đẩy định nghĩa về các xác nhận từ máy chủ và trong ví dụ của tôi, tôi đã chỉ ra chúng là dữ liệu đã có trong phạm vi. Tôi để nó như một bài tập cho người đọc để tìm ra cách người ta có thể đối phó với việc cần phải lấy dữ liệu đó từ API REST (gợi ý: biên dịch hoãn lại).
SCENARIO 3: liên kết dữ liệu hai chiều thông qua liên kết
Tất nhiên, việc sử dụng liên kết phổ biến nhất là chỉ cần kết nối dữ liệu hai chiều thông qua đồng hồ / áp dụng. Hầu hết các chỉ thị thuộc loại này, vì vậy nó được bảo hiểm đầy đủ ở nơi khác.
