कस्टम तत्व ng-repeat

Question

के अंदर सामग्री डुप्लिकेट करता है मैंने एक div policer1.0 तत्व को div संरचना के साथ बनाया है: शीर्षलेख, सामग्री, पाद लेख। जब मैं इसका उपयोग करता हूं, यह ठीक काम कर रहा है, लेकिन ... जब मैं इसे कोणीय-जेएस 1.4.3 एनजी-दोहराने के अंदर उपयोग करता हूं तो यह तत्वों को डुप्लिकेट कर रहा है।

मैं a plunker where you can see this behaviour

बना लिया है तो मेरी तत्व टेम्पलेट है:

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

और जब मैं इसे इस तरह इस्तेमाल किया ठीक काम कर रहा है:

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

लेकिन जब मैं इसे एनजी-दोहराव के अंदर इस्तेमाल किया गया:

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

मुझे क्या याद आ रही है?

* ध्यान दें: मैं पर विचार नहीं करेंगे "मिश्रण मत करो AngularJS और PolymerElements" एक मान्य जवाब के रूप में "

Answer 1

मैं एक ऐसी ही समस्या थी और इससे पहले this post मुझे कारण है कि यह रूप में अच्छी तरह से काम नहीं करता के साथ प्रदान की। एक संभव समाधान के रूप में।

संक्षेप में, यह

... पॉलिमर के छायादार डोम कार्यान्वयन का एक परिणाम है।

और

... कोणीय जैसे अन्य व्यवस्थाएं छायादार डोम के बारे में पता नहीं है, और वहाँ कोणीय और पॉलिमर 1.0 के बीच संरचना के साथ कुछ मुद्दों कर रहे हैं।

समस्या को हल करने के लिए, आपको केवल patch-dom का संदर्भ होना चाहिए।

मैंने आपके plunker को संशोधित करके संशोधित किया है, इसलिए अब आपका कोड ठीक काम करना चाहिए।

---

हालांकि, अंत में मैं इस समाधान के साथ नहीं गया। एचटीएमएल तत्वों को डालने की अनुमति देने के लिए सम्मिलन बिंदुओं (यानी <content></content>) का उपयोग करने के बजाय, मेरा तत्व content संपत्ति का खुलासा करता है और इसे डेटा बाध्यकारी () के माध्यम से उपलब्ध कराता है हालांकि यह पता होना चाहिए कि ऐसा करना कम लचीला है क्योंकि आप अब गतिशील रूप से विभिन्न तत्वों को लिख नहीं सकते आपके तत्व के अंदर)।

<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> 

यह एक और plunker है जो इसे deomostrate करने के लिए है।