用于选定聚合物纸标签的双向角装订答案

【问题标题】：Two-way angular binding for selected polymer paper-tab用于选定聚合物纸标签的双向角装订
【发布时间】：2014-11-12 11:54:26
【问题描述】：

我正在尝试在 Angular 应用程序中使用 Polymer 纸张标签组件。我有这样的标记：

<paper-tabs noink selected="0">
   <paper-tab class="tab1" data-ng-click="currentTab='tab1'">Tab1</paper-tab>
   <paper-tab class="tab2" data-ng-click="currentTab='tab2'">Tab2</paper-tab>
</paper-tabs>

我希望能够将选定的paper-tab 绑定到一个角度范围字段，这样如果我更新范围字段，标记会重新呈现以选择与范围字段的新值有某种关联的新选项卡.

这可能吗？似乎配置选择哪个选项卡的唯一方法是通过paper-tabs 上的selected 属性。但是，如果您在页面的生命周期内以编程方式更新此值（通过 jQuery 或通过角度绑定），则不会导致选项卡在选择新选项卡的情况下重新呈现。

【问题讨论】：

您是否使用专为 AngularJS 构建的聚合物控件？ material.angularjs.org
不，看来我们应该……我去看看，谢谢！

标签： angularjs polymer

【解决方案1】：

看起来您正在使用标准的聚合物纸元素。据我所知，这些 web 组件不能很好地与 AngularJS 配合使用，因此创建了 Angular Material 项目

从example：

<md-tabs selected="selectedIndex">
  <md-tab ng-repeat="tab in tabs | orderBy:predicate:reversed" on-select="onTabSelected(tab)" on-deselect="announceDeselected(tab)" disabled="tab.disabled">
      <md-tab-label>
          {{tab.title}}
      </md-tab-label>
      {{tab.content}}
  </md-tab>
</md-tabs>

【讨论】：

非常感谢！ material.angularjs.org/#/demo/material.components.tabs 上的官方文档说。我一直坚持这一点，直到我看到这里的正确用法不是 md-selected 而是刚刚选择！

【解决方案2】：

如果您正在寻找“标准聚合物纸元素”的解决方案。

试试ng-polymer-elements

AngularJS 双向绑定 Web 组件，支持 Polymer Core 和 Paper 元素

刚刚为我测试过，效果很好，在你的情况下使用：

<paper-tabs noink ng-model="currentTab">

链接：https://gabiaxel.github.io/ng-polymer-elements/

【讨论】：