Thứ tự gọi hàm liên kết trong các lệnh angularjs lồng nhau và lặp đi lặp lại

Question

Tôi khá mới đối với lập trình Javascript và tôi chỉ chạm vào AngularJS. Để đánh giá nó, tôi quyết định viết một ứng dụng ghi chú đơn giản. Mô hình thực sự đơn giản, một danh sách các ghi chú trong đó mỗi ghi chú có nhãn, văn bản và danh sách các thẻ. Tuy nhiên, tôi gặp phải vấn đề khi truyền dữ liệu giữa các phạm vi cô lập của các chỉ thị lồng nhau.

Tôi có ba chỉ thị, ghi chú, ghi chú và trình gắn thẻ (xác định các phần tử mới có cùng tên). Mỗi người trong số họ sử dụng một phạm vi bị cô lập.

Chỉ thị ghi chú sử dụng ng-repeat để "hiển thị" từng ghi chú của nó với phần tử ghi chú.

Chỉ thị ghi chú sử dụng phần tử trình gắn thẻ để "hiển thị" danh sách thẻ.

Chỉ thị ghi chú xác định phạm vi: {getNote: "&", ...} để chuyển thể hiện ghi chú từ danh sách ghi chú tới bộ điều khiển/chỉ thị ghi chú. Hàm getNote (index) được gọi trong hàm liên kết của chỉ thị ghi chú. Điều này hoạt động tốt!

Chỉ thị trình gắn thẻ xác định phạm vi: {getTags: "&", ...} để chuyển danh sách các thẻ cho một ghi chú cụ thể cho bộ điều khiển/chỉ thị trình gắn thẻ. Hàm getTags được gọi trong hàm liên kết của chỉ thị trình gắn thẻ. Điều này không hoạt động!

Như tôi đã hiểu, vấn đề là chức năng liên kết của các chỉ thị được gọi theo thứ tự không nhất quán. Gỡ rối các ứng dụng cho thấy rằng các chức năng liên kết được gọi theo thứ tự sau:

chức năng

1. liên kết trong các ghi chú chỉ thị (thêm chức năng getNote đến phạm vi ghi chú)

2. chức năng liên kết trong Chỉ thị tagger của các lưu ý đầu tiên (gọi getTags trong phạm vi cha mẹ lưu ý) chức năng

3. chức năng liên kết trong chỉ thị nốt nhạc đầu tiên (thêm getTags đến phạm vi) (gọi getNote trong phạm vi ghi chú mẹ)

4. chức năng liên kết trong Chỉ thị tagger của các lưu ý thứ hai (gọi getTags trong phạm vi cha mẹ lưu ý) chức năng

5. chức năng liên kết trong Chỉ thị lưu ý thứ hai (thêm getTags để phạm vi) (gọi getNote trong các phụ huynh lưu ý phạm vi)

này sẽ không làm việc vì trong # 2 phạm vi của các lưu ý đầu tiên có chưa một chức năng getTags.

Ví dụ đơn giản có thể được tìm thấy trong Plunker.

Do đó, câu hỏi của tôi tóm tắt: Điều gì xác định thứ tự mà các hàm liên kết được gọi trong chỉ thị lồng nhau.

(Tôi đã giải quyết được sự cố khi sử dụng $ watch trên getTags trong chỉ thị trình gắn thẻ ...)

liên quan

Answer 1

Trích dẫn Josh D. Miller, người đã vui lòng trả lời một câu hỏi tương tự tôi đã:

"Chỉ cần một vài ghi chú kỹ thuật Giả sử rằng bạn có dấu sau:.

<div directive1> 
    <div directive2> 
    <!-- ... --> 
    </div> 
</div> 

Bây giờ AngularJS sẽ tạo ra các chỉ thị bằng cách chạy chức năng chỉ thị theo một thứ tự nhất định:

directive1: biên dịch

directive2: biên dịch

directive1: điều khiển

directive1: pre-link

directive2: điều khiển

directive2: pre-link

directive2: sau liên kết

directive1: sau liên kết

Theo mặc định một "liên kết" thẳng chức năng là một hậu liên kết, vì vậy chức năng liên kết directive1 bên ngoài của bạn sẽ không chạy cho đến sau khi hàm liên kết bên trong của directive2 đã chạy. Đó là lý do tại sao chúng tôi nói rằng nó chỉ an toàn để thực hiện thao tác DOM trong liên kết sau. "

Answer 2

Trên một yếu tố duy nhất theo thứ tự của các chức năng liên kết được xác định bởi thứ tự của các chức năng Compile mà lần lượt được sắp xếp theo các priority tài sản của đối tượng định nghĩa chỉ thị.

Nguồn: http://docs.angularjs.org/guide/directive

Mở nhiều yếu tố với nhúng: các chỉ thị bên trong được đánh giá trước khi chỉ thị bên ngoài. Lý do: Bản chất của sự biến đổi.

Trên nhiều yếu tố với anh chị em: Thực hiện theo thứ tự từ trên xuống dưới. Lý do: Phân tích logic của biên dịch $.