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

发布时间：2020-12-17 10:22:59 所属栏目：安全来源：网络整理

导读：我创建了一个带有div结构的自定义polymer1.0元素：Header,Content,Footer. 当我使用它时,它工作正常,但是…当我在angular-js1.4.3 ng-repeat中使用它时,它会复制元素. 我创造了a plunker where you can see this behaviour 所以我的元素模板是： template di

我创建了一个带有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混合”作为有效答案.“

之前我遇到过类似的问题,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元素,而是公开内容属性并通过数据绑定使其可用(尽管请注意,这样做不那么灵活不能再在元素内动态组合不同的元素).

<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 deomostrate这.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!