javascript - Mixing Polymer 1.0 y Angular 1.x

angularjs polymer-1.0

Question

Tengo una aplicación Angular 1.x, que estoy tratando de actualizar al diseño del material con la ayuda de Polymer 1.0. Debo indicar que solo estoy usando los elementos de papel como bloques de construcción normales y que no estoy escribiendo ningún código de polímero personalizado.

Hasta ahora, he encontrado 2 problemas, ambos relacionados con elementos de polímero anidados, así que supongo que la solución será la misma o al menos muy similar.

Problema 1

Usando ng-repeat en un paper-item .

Código HTML (con sintaxis de plantillas angulares)

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

El siguiente código no se ejecuta, ya que produce el siguiente 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)

Sin embargo, si uso el siguiente código, el código se ejecuta sin 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>

Observe que solo cambié el elemento raíz (de paper-item a div ).

Problema 2

Intentando usar google-map para mostrar un marcador en un mapa. El mapa se centra, pero no hay marcador.

Código HTML (con sintaxis de plantillas angulares)

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

Salida HTML (compilada por Angular en tiempo de ejecución):

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

Observe que la etiqueta interna google-map-marker tiene NaN como latitud y longitud , mientras que el google-map externo funciona según lo previsto. Esto explica por qué el mapa se centra, pero no hay ningún marcador presente.

TL; DR

Anidar elementos de polímero y usar la sintaxis de doble bigote angular probablemente esté causando el conflicto, ya que los elementos internos de polímero lo tratan como código de polímero y no como código angular.

¿Alguna idea de cómo resolver este problema?

Answer 1

El primer problema se puede resolver utilizando

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

como lo indicó Justin Fagnani en los comentarios, con una sintaxis ligeramente diferente a la establecida en los documentos de polímeros, de lo contrario no se reconocerá en Firefox / IE, consulte https://github.com/Polymer/polymer/issues/1844

Sin embargo, supongo que eso significa que no obtendrás ninguna mejora en el rendimiento que se haya introducido con DOM sombrío.

Answer 2

Si su objetivo es usar Material Design (que para aplicaciones basadas en web se reduce a usar los temas correctos), acabo de ver Angular Material ( https://material.angularjs.org/latest/#/ ). Tal vez eso ayudaría?