AngularJS: Làm thế nào để transclude nhiều chỉ thị?

Question

(1) Tôi có một chỉ thị transcluding được gọi là portlet lấy nội dung của nó và kết thúc nó trong một số mã soạn sẵn. Ví dụ:

<portlet> 
    <div class="foobar">My content</div> 
</portlet> 

đi qua các mẫu của portlet, đó là:

<div class="portlet"> 
    <div class="icon"></div> 
    <div class="content" ng-transclude="">   
    </div> 
</div> 

Và trở thành:

<div class="portlet"> 
    <div class="icon"></div> 
    <div class="content"> 
     <div class="foobar">My content</div> <!--the original content 
             passed to portlet--> 
    </div> 

(2) tôi có thêm hai chỉ thị, dyn-form và dyn-form-field . Được mô tả theo cách này:

<dyn-form> 
    <dyn-form-field type="textbox" placeholder="..." label="Name" /> 
    <! ...and so on... --> 
</dyn> 

dyn-form 's mẫu:

<form class="..." ng-transclude=""> 
</form> 

Mỗi dyn-field' mẫu s tạo ra html để sản xuất nhãn/lĩnh vực cho nó. Vì vậy, các mã ban đầu được dịch sang một cái gì đó như thế này:

<form class="..."> 
    <label>Name: <input type="text" placeholder="..." /></label> 
    <!- ....and so on... --> 
</form> 

(3) Dưới đây là vấn đề. Tôi muốn sử dụng chỉ thị thứ 3, dyn-form-portlet để tạo mã boilerplate để hiển thị một số nút được hiển thị phía trên mọi biểu mẫu, sau đó hiển thị một portlet và đặt dyn-form bên trong portlet. Đây là cách tôi đang cố gắng để làm điều này:

mẫu

<dyn-form-portlet> 
    <dyn-form> 
    <dyn-form-field /> 
    </dyn-form> 
</dyn-form-portlet> 

dyn-form-portlet 's trông như thế này:

<div class="dyn-form-portlet"> 
    <button>Foo</button> 
    <button>Bar</button> 
    <portlet ng-transclude=""> 
    </portlet> 
</div>  

Theoratically này nên làm việc, tức là <dyn-form> nên được đặt bên trong <portlet>, <dyn-form-field> s bên <dyn-form> , v.v. Nhưng khi tôi chạy điều này, tôi chỉ thấy các nút được hiển thị bởi dyn-form-portlet và mã cho portlet, nhưng portlet trống và biểu mẫu không được hiển thị trong đó.

Tôi đang làm điều gì đó sai, hoặc đây có phải là lỗi không?

Answer 1

Tôi đã cố gắng khắc phục điều đó. Tôi đã sử dụng transclude : 'element' cùng với replace : true trên chỉ thị portlet và tôi đã cho nó cao hơn các chỉ thị khác priority. Lý do tại sao tôi đã làm điều đó là khá cảm giác hơn là kiến ​​thức sâu sắc về hoạt động bên trong anuglar.

Về phần đầu transclude : 'element' được sử dụng vì

'yếu tố' - transclude cả yếu tố bao gồm bất kỳ chỉ thị được xác định ở mức ưu tiên thấp hơn.

Thay thế được sử dụng vì từ những gì tôi đã nhìn thấy nó luôn được sử dụng khi transclude được đặt thành phần tử. Ưu tiên là linh cảm của tôi.

Đây là plnkr http://plnkr.co/edit/axQ90dHOLmLNeNQ4ZlNl?p=preview

Điều này có lẽ không phải là câu trả lời bạn đang tìm kiếm nhưng tôi sẽ cần phải nhìn sâu vào chỉ thị góc để thực sự hiểu những gì đang xảy ra. Dù sao, nó không phải là một lỗi, nó chỉ là tài liệu nghèo nàn.