User element duplicate content inside ng-repeat

Question

I created a custom polymer1.0 element with a div structure: Header, Content, Footer. When I use it, it works fine, but ... When I use it inside angular-js1.4.3 ng-repeat, it duplicates the elements.

I created a plunker where you can see this behavior

So my element template:

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

And when I used it, it works fine:

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

But not when I used it inside ng-repeat, for example:

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

What am I missing?

* Note. I will not consider "Do not mix AngularJS and PolymerElements" as a valid answer.

Answer 1

I had a similar problem before and this post provided me with a reason why it is not working as well as a possible solution.

In short, it is

... the result of the Polymer Shady DOM implementation.

and

... other frameworks such as Angular are unaware of the Shady DOM, and there are some problems with the composition between Angular and Polymer 1.0.

To solve this problem, all you need is a link to patch-dom .

I modified your plunker to include it, so now your code should work fine.

---

However, in the end, I did not go with this decision. Instead of using input points (i.e. <content></content> ) to insert HTML elements, my element provides a content property and makes it accessible through data binding (although keep in mind that doing this is less flexible, since you can no longer create various elements dynamically inside your element).

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

Here's another plunker to de-bridge it.