У меня есть приложение Angular 1.x, которое я пытаюсь обновить до материального дизайна с помощью Polymer 1.0. Я должен заявить, что я использую только бумажные элементы как обычные строительные блоки и что я не пишу какой-либо пользовательский Полимерный код.
До сих пор я столкнулся с двумя проблемами, связанными с вложенными элементами Polymer, поэтому я думаю, что решение будет таким же или, по крайней мере, очень похожим.
Проблема 1
Используя ng-repeat на paper-item.
HTML-код (с синтаксисом Angular templating)
<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>
Следующий код не запускается, так как он вызывает следующую ошибку:
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)
Однако, если я использую следующий код, код запускает без ошибок:
<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>
Обратите внимание, что я только изменил корневой элемент (от paper-item до div).
Проблема 2
Попытка использовать google-map для отображения маркера на карте. Центры карт, но маркера нет.
HTML-код (с синтаксисом Angular templating)
<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 (как скомпилирован Angular во время выполнения):
<google-map latitude="12.345" longitude="12.345">
<google-map-marker latitude="NaN" longitude="NaN"></google-map-marker>
</google-map>
Обратите внимание, что внутренний тег google-map-marker имеет NaN как широту и долготу, а внешний google-map работает по назначению. Это объясняет, почему центры карт ОК, но маркер отсутствует.
TL; DR
Вложенные полимерные элементы и использование синтаксиса двойного усы Angular, вероятно, вызывают конфликт, так как внутренние полимерные элементы рассматривают его как код полимера, а не Angular.
Есть идеи, как решить эту проблему?
