Trộn Polymer 1.0 và Góc 1.x

Question

Tôi có ứng dụng Angular 1.x, mà tôi đang cố gắng cập nhật lên thiết kế material design với sự trợ giúp của Polymer 1.0. Tôi phải nói rằng tôi chỉ sử dụng các yếu tố giấy như các khối xây dựng thông thường và tôi không viết bất kỳ mã Polymer tùy chỉnh nào.

Cho đến nay, tôi đã gặp phải 2 vấn đề, cả hai giao dịch với các phần tử Polymer lồng nhau, vì vậy tôi đoán giải pháp sẽ giống hoặc ít nhất là rất giống nhau.

---

Vấn đề 1

Sử dụng ng-repeat trên paper-item.

HTML code (với cú pháp templating góc)

<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> 

Các mã sau đây không chạy như nó tạo ra các lỗi sau:

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) 

Tuy nhiên, nếu tôi sử dụng đoạn mã sau, mã không chạy mà không có lỗi:

<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> 

Lưu ý rằng tôi chỉ thay đổi phần tử gốc (từ paper-item thành div).

---

Vấn đề 2

Cố gắng sử dụng google-map để hiển thị một điểm đánh dấu trên bản đồ. Trung tâm bản đồ, nhưng không có điểm đánh dấu.

HTML code (với cú pháp templating góc)

<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> 

đầu ra HTML (như biên soạn bởi góc trong thời gian chạy):

<google-map latitude="12.345" longitude="12.345"> 
    <google-map-marker latitude="NaN" longitude="NaN"></google-map-marker> 
</google-map> 

Thông báo thẻ nội google-map-marker có NaN như vĩ và kinh độ, trong khi bên ngoài google-map hoạt động như dự định. Điều này giải thích tại sao bản đồ tập trung OK, nhưng không có điểm đánh dấu nào.

---

TL; DR

yếu tố làm tổ Polymer và sử dụng cú pháp đúp ria mép góc có lẽ gây ra xung đột, như các yếu tố bên trong Polymer đối xử với nó như mã Polymer và không mã kiễu góc.

Bất kỳ ý tưởng nào về cách giải quyết vấn đề này?

Answer 1

Nếu mục tiêu của bạn là sử dụng Material Design (dành cho các ứng dụng dựa trên web để sử dụng đúng chủ đề), tôi chỉ thấy Vật liệu góc (https://material.angularjs.org/latest/#/). Có lẽ điều đó sẽ giúp ích?

Answer 2

Vấn đề đầu tiên có thể được giải quyết bằng cách sử dụng

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

như đã nêu bởi Justin Fagnani trong các ý kiến, với cú pháp hơi khác so với quy định trong tài liệu polymer, nếu không nó sẽ không được công nhận trong Firefox/IE, xem https://github.com/Polymer/polymer/issues/1844

Tuy nhiên, tôi đoán điều đó có nghĩa là bạn sẽ không nhận được bất kỳ cải tiến hiệu suất nào được giới thiệu với DOM mờ ám.