Mieszanie polimerów 1.0 i Angular 1.x

Question

Mam aplikację Angular 1.x, którą próbuję zaktualizować do projektu materiału za pomocą Polymer 1.0. Muszę stwierdzić, że używam tylko elementów papierowych jako normalnych cegiełek i że nie piszę żadnego niestandardowego kodu polimerowego.

Do tej pory napotkałem 2 problemy, oba dotyczące zagnieżdżonych elementów polimerowych, więc sądzę, że rozwiązanie będzie takie samo lub co najmniej bardzo podobne.

---

Problem 1

Korzystanie ng-repeat na paper-item.

HTML kod (z Kątowymi składni szablonów)

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

Poniższy kod nie działa, gdyż wytwarza się następujący błąd:

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) 

Jednakże, jeśli mogę użyć poniższy kod, kod działa bez błędu:

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

Zauważ, że zmieniłem tylko element główny (z paper-item na div).

---

Problem 2

Próba użycia google-map pokazać znacznik na mapie. Mapa centrów, ale nie ma znacznika.

kod HTML (kątowo składni szablonów)

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

wyjścia HTML (jak opracowany przez kątowe na starcie)

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

Wskazówki wewnętrzna znacznik google-map-marker ma NaN jak szerokość i długość geograficzna, natomiast zewnętrzna google-map działa zgodnie z przeznaczeniem. To wyjaśnia, dlaczego mapa jest w porządku, ale nie ma znacznika.

---

TL; DR

elementy zagnieżdżanie polimeru i za pomocą kątowego składni dwukrotnie wąsy prawdopodobnie powoduje konflikt, ponieważ wewnętrzne elementy polimerowe traktować jako kod polimeru i nie kątowy kodu.

Jakieś pomysły na rozwiązanie tego problemu?

Answer 1

Jeśli twoim celem jest użycie Material Design (który dla aplikacji internetowych sprowadza się do używania właściwych motywów), właśnie zobaczyłem materiał kątowy (https://material.angularjs.org/latest/#/). Może to pomoże?

Answer 2

Pierwszy problem można rozwiązać za pomocą

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

jak stwierdził Justin Fagnani w komentarzach, z nieco innej składni niż podano w docs polimerowych, w przeciwnym razie nie zostaną rozpoznane w Firefox/IE, zobacz https://github.com/Polymer/polymer/issues/1844

Jednak to oznacza, że ​​nie dostaniesz żadnych ulepszeń wydajności, które zostały wprowadzone z podejrzanym DOM.