混合聚合物1.0和角1.x

Question

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

到目前为止,我遇到了两个问题,都处理嵌套的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具有NaN的纬度和经度,而外部google-map的作品如预期.这解释了为什么地图中心正常,但没有标记存在.

---

TL; DR

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

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

Answer 1

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