Tại sao phạm vi của ng-transclude không phải là một đứa trẻ trong phạm vi chỉ thị của nó - nếu chỉ thị có phạm vi bị cô lập?

Question

Cho một chỉ thị (container1) với transclude và một phạm vi cô lập, khi chỉ thị được liên kết sau đó tôi có những phạm vi:

Scope 004   <-- scope of the body 
    Scope 005  <-- scope of directive container1 
    Scope 006  <-- scope of the ng-transclude 

tôi mong đợi:

Scope 004   <-- scope of the body 
    Scope 005  <-- scope of the directive 
     Scope 006 <-- scope of the ng-transclude 

Nếu chỉ thị tương tự có phạm vi được chia sẻ thay vì phạm vi bị cô lập, tôi nhận được kết quả mong đợi.

Điều này gây cho tôi một vấn đề bởi vì, nếu nội dung nhúng chứa một chỉ thị (component1) với một phạm vi cô lập, tôi nhận được:

Scope 004    <-- scope of the body 
    Scope 005   <-- scope of the directive 
    Scope 006   <-- scope of the ng-transclude 
      Scope 007 <-- scope of directive component1 

Tôi muốn sử dụng các chỉ thị như thế này:

<container1> 
    <component1 data="objectExposedInContainer1"/> 
</container1> 

Nhưng điều đó không hiệu quả, bên trong component1, $scope.data là undefined vì objectExposedInContainer1 không nằm đúng phạm vi.

Tôi có hai câu hỏi:

• Tại sao ng-transclude 's phạm vi không phải là một đứa trẻ phạm vi chỉ thị của nó nếu chỉ thị có phạm vi bị cô lập? Đây có phải là một lỗi?
• Nếu đó không phải là lỗi, làm cách nào để chỉ thị vùng chứa chuyển dữ liệu đến nội dung của nó, nếu không phải bằng cách đặt các thuộc tính như tôi đã thử.

Đây là ví dụ mẫu không hoạt động: http://plnkr.co/edit/NDmJiRzTF9e5gw8Buht2?p=preview. Bởi vì Plunker được xây dựng với Anguar, thật khó để gỡ lỗi với Batarang. Tôi khuyên bạn nên tải xuống mã cục bộ. Nhận xét ra line 10 của app.js để làm cho nó hoạt động bằng cách sử dụng một phạm vi chia sẻ.

Answer 1

Tại sao phạm vi của ng-transclude không phải là con của phạm vi chỉ thị của nó nếu chỉ thị có phạm vi riêng biệt?

ng-transclude được thiết kế để cho phép chỉ thị để làm việc với nội dung tùy ý, và phạm vi riêng biệt được thiết kế để cho phép chỉ thị để đóng gói dữ liệu của họ.

Nếu ng-transclude không lưu giữ phạm vi như vậy, bất kỳ nội dung tùy ý nào mà bạn đang chuyển sẽ cần biết chi tiết triển khai của chỉ thị của bạn (nghĩa là cần biết những gì có sẵn trên phạm vi cô lập mà bạn đã tạo).

Nếu đó không phải là lỗi, cách chỉ thị vùng chứa chuyển dữ liệu đến nội dung của nó, nếu không bằng cách đặt thuộc tính như tôi đã thử.

Nếu chỉ thị vùng chứa và chỉ thị được kết hợp - tức là bạn đã viết cả hai và cần chúng cùng nhau hành động - thì chúng sẽ liên lạc qua bộ điều khiển dùng chung.

Nếu chỉ thị vùng chứa được cho là đưa nội dung vào phạm vi của trẻ em (ví dụ:ng-lặp lại), sau đó bạn không nên sử dụng một phạm vi bị cô lập.

---

Các tài liệu góc khá rõ ràng về những gì hành vi được coi là:

"Trong một thiết lập điển hình widget tạo ra một phạm vi cô lập, nhưng nhúng không phải là một đứa trẻ, nhưng một anh chị em của phạm vi cô lập này làm cho tiện ích có thể có trạng thái riêng tư và việc chuyển đổi bị ràng buộc với phạm vi phụ huynh (được cách ly). "

Answer 2

bạn có thể tự transclude phần tử con

link: function(scope, element, attrs, ctrl, transclude) { 
    transclude(scope, function(clone, scope) { 
     element.find('.transclude-placeholder').append(clone); 
    }); 
} 

Answer 3

Câu trả lời đầu là chỉ đúng cho góc lên đến v1.2.

Kể từ khi Angular v1.3 hành vi đã thay đổi và hiện hành xử lý chính xác như được mô tả trong phần "Tôi mong đợi" của câu hỏi, làm cho câu hỏi này lỗi thời đối với Angular v1.3 +.

Nguồn: https://github.com/angular/angular.js/commit/fb0c77f0b66ed757a56af13f81b943419fdcbd7f