Question

我创建了一个带有div结构的自定义polymer1.0元素：Header，Content，Footer。当我使用它时，它工作正常，但是...当我在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向我提供了为什么它不能和可能的解决方案一起工作的原因。

简而言之，

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

和

......像Angular这样的其他框架不知道Shady DOM，那里是Angular和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

1 个答案: