Mixing Polymer 1.0 and Angular 1.x

Question

I have an Angular 1.x app, which I am trying to update to material design with the help of Polymer 1.0. I must state that I am only using the paper elements as normal building blocks and that I am not writing any custom Polymer code.

So far, I have encountered 2 problems, both dealing with nested Polymer elements, so I guess the solution will be the same or at least very similar.

---

Problem 1

Using ng-repeat on a paper-item.

HTML code (with Angular templating syntax)

<paper-item data-ng-repeat="event in events">     <paper-item-body two-line>         <div>{{event.title}}</div>         <div secondary>{{event.description}}</div>     </paper-item-body> </paper-item> 

The following code does not run as it produces the following error:

TypeError: Cannot read property 'childNodes' of undefined     at g (angular.js:7531)     at g (angular.js:7531)     at N (angular.js:8127)     at g (angular.js:7527)     at angular.js:7402     at $get.h (angular.js:7546)     at m (angular.js:8159)     at angular.js:27052     at Object.fn (angular.js:15474)     at m.$get.m.$digest (angular.js:15609) 

However, if I use the following code, the code does run without error:

<div data-ng-repeat="event in events">     <paper-item-body two-line>         <div>{{event.title}}</div>         <div secondary>{{event.description}}</div>     </paper-item-body> </div> 

Notice that I only changed the root element (from paper-item to div).

---

Problem 2

Trying to use google-map to show a marker on a map. The map centers, but there is no marker.

HTML code (with Angular templating syntax)

<google-map latitude="{{event.y_wgs}}" longitude="{{event.x_wgs}}">     <google-map-marker latitude="{{event.y_wgs}}" longitude="{{event.x_wgs}}"></google-map-marker> </google-map> 

HTML output (as compiled by Angular at runtime):

<google-map latitude="12.345" longitude="12.345">     <google-map-marker latitude="NaN" longitude="NaN"></google-map-marker> </google-map> 

Notice the inner tag google-map-marker has NaN as latitude and longitude, while the outer google-map works as intended. This explains why the map centers OK, but no marker is present.

---

TL;DR

Nesting Polymer elements and using Angular double-mustache syntax is probably causing the conflict, as the inner Polymer elements treat it as Polymer code and not Angular code.

Any ideas how to resolve this problem?

Answer 1

If your aim is to use Material Design (which for web based apps boils down to using the correct themes), I just saw Angular Material (https://material.angularjs.org/latest/#/). Maybe that would help?