angularjs - 元素包含

标签 angularjs polymer shadow-dom transclusion

Polymer 中是否有类似 angularjs 指令的 transclude 属性的东西?是什么让我可以将一些元素包含到模板中的特定位置?

我想实现如下目标:

<my-header title="My title">
    <my-header-item name="Item 1"></my-header-item>
    <my-header-item name="Item 2"></my-header-item>
</my-header>

可以表示为:

<h1>My title</h1> <!-- "My title" given by my-header's title attribute -->
<ul>
    <li>Item 1 <!-- given by my-header-item -->
    <li>Item 2
</ul>

我不确定这是 polymer 的任务,还是 polymer 的典型使用方式。我在问,因为我开始喜欢 polymer ,我想保持惯用思维。

最佳答案

在 Shadow DOM 领域,这称为分发。要将 light DOM 节点分布到 shadow dom 中,您可以使用 <content>插入点。

http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees

从字面上看,这是一种将节点从 light dom 渲染到 shadow dom 中的占位符的方法。 如果你想用 my-header/my-header-item title/name 属性做一些棘手的事情,你可以这样做:

<polymer-element name="my-header">
  <template>
    <ul>
      <template repeat="{{item in items}}">
        <li>{{item.name}}</li>
      </template>
    </ul>
    <content id="c" select="my-header-item"></content>
  </template>
  <script>
   Polymer('my-header', {
     domReady: function() {
       this.items = [].slice.call(this.$.c.getDistributedNodes());
     }
   });
  </script>
</polymer-element>

演示:http://jsbin.com/hupuwoma/1/edit

我有一个更完整的选项卡演示,可以在 https://github.com/ebidel/polymer-experiments/blob/master/polymer-and-angular/together/elements/wc-tabs.html 上完成此设置。 .

关于angularjs - 元素包含,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23549334/

相关文章:

css - 如何使用媒体查询更改主机的CSS :( polymer )

javascript - 如何在 Jest 测试中模拟影子元素

javascript - 自定义元素 getRootNode.closest() 函数跨越多个(父)shadowDOM 边界

javascript - ng-模型列表未在 Angular js 中更新

javascript - 如何将 Jade 变量分配给 Angular 绑定(bind)

angularjs - 在父 Controller 中调用子 Controller 功能

javascript - polymer NEON 元素 - 使元素内的图像也触发动画

javascript - ionicModal 禁用点击事件

javascript - 导航离开然后返回时, polymer 按钮/文本变粗

css - 在不破坏向前兼容性的情况下定位 Shadow DOM 元素