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-itemdiv)。


问题 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具有latitudelongitude,而外部标签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 回答