我有一个 Angular 1.x 应用程序,我正在尝试在 Polymer 1.0 的帮助下将其更新为材料设计。我必须声明,我只是将纸元素用作普通的构建块,并且我没有编写任何自定义的 Polymer 代码。
到目前为止,我遇到了 2 个问题,都是处理嵌套的 Polymer 元素,所以我想解决方案将是相同的或至少非常相似。
问题 1
ng-repeat
在纸质物品上使用。
HTML 代码(使用 Angular 模板语法)
<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 模板语法)
<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
具有latitude和longitude,而外部标签NaN
按预期工作。这解释了为什么地图中心正常,但没有标记。google-map
TL;博士
嵌套 Polymer 元素和使用 Angular 双胡须语法可能会导致冲突,因为内部 Polymer 元素将其视为 Polymer 代码而不是 Angular 代码。
任何想法如何解决这个问题?