CODEWITHSUNDEEP
javascriptangularjspolymerpolymer-1.0
alesc
alesc

Reputation: 2780

Mixing Polymer 1.0 and Angular 1.x

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?

Upvotes: 25

Views: 1395

Answers (2)

Kristjan Liiva
Kristjan Liiva

Reputation: 9549

The first problem can be solved by using

window.Polymer = {dom: 'shadow'};

as stated by Justin Fagnani in the comments, with slightly different syntax than stated in the polymer docs, otherwise it will not be recognized in Firefox/IE, see https://github.com/Polymer/polymer/issues/1844

However, I guess that means that you won't get any performance improvements that were introduced with shady DOM.

Upvotes: 0

Neeraj
Neeraj

Reputation: 8532

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?

Upvotes: 3

Related Questions