CODEWITHSUNDEEP
angularjspolymer
net.user
net.user

Reputation: 831

wiring together polymer components and angular controllers

I've just started to experiment with polymer and try to use it together with AngularJS in one single-page app. Therefore I picked up two polymer-ui-components: polymer-ui-sidebar-menu and polymer-ui-pages. Every time the user selects an item from the sidebar, the pages component should show its item with same index...

But how to wire these two components?

I've tried to use the onclick event from the menu, but this don't work as expected.

Maybe there exists any useful documents about polymer in the world wide web besides their own documentation?

UPDATE:

HTML:

<polymer-ui-sidebar-menu label=Channels>
  <polymer-ui-menu-item ng-repeat="channel in channels"
    ng-click=select($index)
    label="{{ channel }}"
    icon=menu>
  </polymer-ui-menu-item>
</polymer-ui-sidebar-menu>
<polymer-ui-pages>
  <span ng-repeat="channel in channels">content: {{ channel }}</span>
</polymer-ui-pages>

Controller:

$scope.select = function (index) {
  angular.element("polymer-ui-sidebar-menu")[0].selected = idx;
  angular.element("polymer-ui-pages")[0].selected = idx;
};

To get the selector in angular.element(selector) working, you have to include jquery before angular and polymer before jquery!

Upvotes: 5

Views: 2212

Answers (1)

ebidel
ebidel

Reputation: 24109

I made a video demonstrating how a web component (Polymer element) can talk to an Angular directive: http://www.youtube.com/watch?v=p1NpZ-0Op0w&list=PLRAVCSU_HVYu-zlRaqArF8Ytwz1jlMOIM&index=1

The example in that video data-binds the components' attributes using Angular's data binding feature, but you should be able to use other features to get things working. Have you tried adding ng-click on <polymer-ui-sidebar-menu>?

Upvotes: 3

Related Questions