javascript - Mixing Polymer 1.0 and Angular 1.x - Stack Overflow

admin管理员组

文章数量:1327997

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

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

• javascript
• angularjs
• polymer
• polymer-1.0

Share Improve this question Follow edited Jun 14, 2015 at 10:30 alesc asked Jun 6, 2015 at 14:03 alescalesc 2,78033 gold badges3131 silver badges4646 bronze badges 9

• 1 Your first problem is likely related to the ShadyDOM shim. When you pose things into Polymer element imperatively, you have to use the Polymer.dom API to satisfy ShadyDOM (which Angular does not). Try running your example on Chrome, but set window.Polymer.dom = true before importing Polymer to see if it works under native Shadow DOM. Also, Polymer will only act on {{ }} syntax in the context of a template it's processing. – Scott Miles Commented Jun 14, 2015 at 10:40
• Thank you for your ment. I am using Chrome, but when I set window.Polymer.dom = true in various locations, nothing happens. Except if I put it after including Polymer elements, then I get multiple error with the following content: Polymer.dom is not a function. – alesc Commented Jun 14, 2015 at 10:49
• Don't put window.Polymer.dom = true in various places :), only set that before importing Polymer. If it doesn't have any effect, then I don't know what the problem is. – Scott Miles Commented Jun 14, 2015 at 11:02
• I was putting it in various locations because it didn't work. I have tried the following: (1) putting it before anything and got Cannot set property 'dom' of undefined; (2) after webponents.js but before polymer.html and got no such error, but it still doesn't work (got the error from the original post); (3) after both webponents.js and polymer.html and got the error from my previous ment Polymer.dom is not a function. Overall, it doesn't seem to change anything. – alesc Commented Jun 14, 2015 at 11:16
• 2 See polymer-project/1.0/docs/devguide/settings.html It should be: window.Polymer = window.Polymer || {}; window.Polymer.dom = 'shadow'; – Justin Fagnani Commented Jun 19, 2015 at 0:04

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 3 +25

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/latest/#/). Maybe that would help?

The first problem can be solved by using

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

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

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

本文标签： javascriptMixing Polymer 10 and Angular 1xStack Overflow