Two-way angular binding for selected polymer paper-tab

2
votes

I'm trying to use the Polymer paper-tabs component in an Angular app. I have the markup like:

<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>

I want to be able to bind the selected paper-tab to an angular scope field, such that if I update the scope field, the markup re-renders to select the new tab that is somehow associated with the scope field's new value.

Is this possible? It seems that the only way to configure which tab is selected is via the selected attribte on paper-tabs. But if you programmatically update this value during the life of the page (either via jQuery or via an angular binding), then it doesn't cause the tabs to re-render with the new tab selected.

2
angularjspolymer
Are you using the polymer controls build specifically for AngularJS? material.angularjs.org – Oliver
No, it appears that we should be though... I'll check them out, thanks! – Simon Green

2 Answers

1
votes

It looks like you are using the standard Polymer paper elements. As far as I know these webcomponents don't play that nicely with AngularJS and hence the Angular Material project was created

To do what you need the Angular Material should look like, from the 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>
1
votes

If You looking solution for "standard Polymer paper elements".

Try ng-polymer-elements

AngularJS two-way binding for Web Components, whit support for Polymer Core and Paper elements

Just tested for me, and works great, in your case use:

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

link: https://gabiaxel.github.io/ng-polymer-elements/