Nội dung tùy chỉnh trùng lặp nội dung bên trong ng-repeat

Question

Tôi đã tạo phần tử polymer1.0 tùy chỉnh với cấu trúc div: Tiêu đề, Nội dung, Chân trang. Khi tôi sử dụng nó, nó hoạt động tốt, nhưng ... Khi tôi sử dụng nó bên trong một góc-js1.4.3 ng-lặp lại nó nhân bản các yếu tố.

Tôi đã tạo a plunker where you can see this behaviour

Vì vậy, mẫu yếu tố của tôi là:

<template> 
    <div class="slideFormHeader">Header</div> 
    <hr> 
    <div class="slideFormBody"> 
     <content></content> 
    </div> 
    <hr> 
    <div class="slideFormFooter">Footer</div> 
</template> 

Và khi tôi sử dụng nó như thế này đang làm việc tốt:

<my-element>My Content</my-element> 

Nhưng không phải khi tôi sử dụng nó trong một ng-lặp lại như:

<my-element ng-repeat=" item in ['My Content']">{{item}}</my-element> 

Tôi đang thiếu gì?

* Lưu ý: Tôi sẽ không xem xét "Đừng trộn AngularJS và PolymerElements" như một câu trả lời hợp lệ "

Answer 1

Tôi đã có một vấn đề tương tự trước và this post cung cấp cho tôi với lý do tại sao nó không hoạt động nữa. như một giải pháp khả thi.

Nói tóm lại, nó là

... một kết quả của việc thực hiện Shady DOM Polymer của.

và

... các khung công tác khác như Angular không biết về Shady DOM và có là một số vấn đề về thành phần giữa Angular và Polymer 1.0.

Để giải quyết vấn đề, tất cả những gì bạn cần là tham chiếu đến patch-dom.

Tôi đã sửa đổi plunker của bạn bằng cách bao gồm nó để mã của bạn hoạt động tốt.

---

Tuy nhiên, cuối cùng tôi không đi với giải pháp này. Thay vì sử dụng các điểm chèn (tức là <content></content>) để cho phép chèn các phần tử HTML, phần tử của tôi hiển thị thuộc tính content và làm cho nó có sẵn thông qua ràng buộc dữ liệu (). bên trong phần tử của bạn).

<dom-module id="my-element"> 

<template> 
    <div class="slideFormHeader">Header</div> 
    <hr> 
    <div class="slideFormBody">[[content]]</div> 
    <hr> 
    <div class="slideFormFooter">Footer</div> 
    <br> 
</template> 

<script> 
    HTMLImports.whenReady(function() { 
    Polymer({ 
     is: "my-element", 
     properties: { 
     content: { 
      type: String, 
      value: '' 
     } 
     } 
    }); 
    }); 
</script> 
</dom-module> 

<my-element ng-repeat="item in items" content="{{item}}"></my-element> 

Đây là một số khác plunker để khử lưu lượng này.