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

Question

我创建了一个带有div结构的自定义polymer1.0元素:Header,Content,Footer.当我使用它时,它工作正常,但是...当我在angular-js1.4.3 ng-repeat中使用它时,它会复制元素.

我已经创建了一个可以看到此行为的plunker

所以我的元素模板是:

<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

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

简而言之，就是

...Polymer 的 Shady DOM 实现的结果。

和

...其他框架（例如 Angular）不了解 Shady DOM，并且 Angular 和 Polymer 1.0 之间的组合存在一些问题。

要解决这个问题，您所需要的只是对patch-dom 的引用。

我已经通过包含它来修改你的插件，所以现在你的代码应该可以正常工作了。

然而，最终我没有采用这个解决方案。我的元素不是使用插入点（即<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>

这是另一个笨蛋来证明这一点。