自定义元素重复 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>

我错过了什么？

*注意：我不会将 "Do not mix AngularJS and 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 属性并通过数据绑定使其可用（尽管请注意，这样做不太灵活，因为您不能再在元素内部动态组合不同的元素)。

<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 来说明这一点。

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

Custom element duplicates content inside ng-repeat

angularjs

angularjs-ng-repeat

polymer

polymer-1.0