Question

我有一个Angular 1.x应用程序，我试图在Polymer 1.0的帮助下更新到材料设计。我必须声明我只使用纸质元素作为普通构建块，而且我没有编写任何自定义聚合物代码。

到目前为止，我遇到了两个问题，都处理嵌套的Polymer元素，所以我猜解决方案是相同的，或者至少非常相似。

问题1

在paper-item上使用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的{{1}}为纬度和经度，而外部NaN按预期工作。这解释了为什么地图中心正常，但没有标记存在。

TL; DR

嵌套Polymer元素并使用Angular双胡子语法可能会导致冲突，因为内部Polymer元素将其视为Polymer代码而不是Angular代码。

有任何想法如何解决这个问题？

Answer 1

如果您的目标是使用Material Design（基于Web的应用程序归结为使用正确的主题），我只看到Angular Material（https://material.angularjs.org/latest/#/）。也许这会有所帮助吗？

Answer 2

使用

可以解决第一个问题

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

正如Justin Fagnani在评论中所述，语法与聚合物文档中所述略有不同，否则在Firefox / IE中无法识别，请参阅https://github.com/Polymer/polymer/issues/1844

但是，我想这意味着您无法获得使用shady DOM引入的任何性能改进。

混合聚合物1.0和角度1.x

2 个答案: