25

我有一个 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 代码。

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

4

2 回答 2

3

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

于 2015-06-19T14:55:28.523 回答
0

第一个问题可以通过使用来解决

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

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

但是，我想这意味着您不会获得任何由 shady DOM 引入的性能改进。

于 2015-07-27T14:45:45.080 回答