Mixing Polymer 1.0 und Angular 1.x

Question

Ich habe eine Angular 1.x App, die ich mit Hilfe von Polymer 1.0 auf Materialdesign zu aktualisieren versuche. Ich muss festhalten, dass ich die Papierelemente nur als normale Bausteine ​​benutze und dass ich keinen benutzerdefinierten Polymer-Code schreibe.

Bis jetzt habe ich 2 Probleme, beide mit verschachtelten Polymer-Elemente, so dass ich denke, die Lösung wird die gleiche oder zumindest sehr ähnlich sein.

---

Problem 1

ng-repeat Verwendung auf einem paper-item.

HTML-Code (mit kantiger 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> 

Der folgende Code nicht ausgeführt, wie es die folgenden Fehlermeldung erzeugt:

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) 

Allerdings, wenn ich den folgenden Code verwenden, den Code ist ohne Fehler ausgeführt:

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

Beachten Sie, dass ich nur das Wurzelelement geändert habe (von paper-item zu div).

---

Problem 2

Versuch google-map zu verwenden, um eine Markierung auf einer Karte anzuzeigen. Die Karte zentriert sich, aber es gibt keine Markierung.

HTML-Code (mit kantiger Templat 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-Ausgabe (als zur Laufzeit durch Angular kompilierte):

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

Hinweis innerer Tag google-map-marker hat NaN als Breite und Längengrad, während der äußere google-map wie vorgesehen funktioniert. Dies erklärt, warum die Karte in der Mitte zentriert ist, aber keine Markierung vorhanden ist.

---

TL; DR

Nesting Polymerelemente und winklige doppelt Schnurrbart Syntax verursachen wahrscheinlich den Konflikt, wie die inneren Polymerelemente als Polymer Code behandeln und nicht Angular-Code.

Haben Sie Ideen, wie Sie dieses Problem lösen können?

Answer 1

Wenn Sie Material Design verwenden möchten (was für webbasierte Apps die Verwendung der richtigen Designs zur Folge hat), habe ich gerade das Angular Material (https://material.angularjs.org/latest/#/) gesehen. Vielleicht würde das helfen?

Answer 2

Das erste Problem kann durch die Verwendung

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

wie angegeben von Justin Fagnani in den Kommentaren, mit etwas anderen Syntax als angegeben in dem Polymer docs gelöst werden, sonst wird es nicht in Firefox/IE erkannt werden, siehe https://github.com/Polymer/polymer/issues/1844

aber ich denke, das bedeutet, dass Sie keine Leistungsverbesserungen erhalten, die mit schattigem DOM eingeführt wurde.