angularjs - 自定义元素在 ng-repeat 中重复内容

Question

我创建了一个具有 div 结构的自定义 polymer1.0 元素:页眉、内容、页脚。
当我使用它时，它工作正常，但是......当我在 angular-js1.4.3 ng-repeat 中使用它时，它会复制元素。

我创建了 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>

但不是当我在 ng-repeat 中使用它时，例如:

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

我错过了什么？

*注意:我不会认为“不要混合 AngularJS 和 PolymerElements”作为有效答案。”

Answer 1

我之前也遇到过类似的问题，this post为我提供了它不起作用的原因以及可能的解决方案。

简而言之，它是

... a result of Polymer's Shady DOM implementation.

和

... other frameworks like Angular don't know about Shady DOM, and there are some issues with composition between Angular and Polymer 1.0.

要解决此问题，您只需引用 patch-dom .

我修改了你的 plunker通过包含它，现在您的代码应该可以正常工作了。

但是，最后我没有采用这个解决方案。我的元素没有使用插入点(即 <content></content> )来允许插入 HTML 元素，而是公开了一个 content属性并通过数据绑定(bind)使其可用(但请注意，这样做不太灵活，因为您不能再在元素内部动态组合不同的元素)。

<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去证明这一点。