폴리머 1.0과 앵글 1.x 혼합

폴리머 1.0과 앵글 1.x 혼합

저는 Angular 1.x 앱을 가지고 있는데, Polymer 1.0의 도움을 받아 재료 디자인으로 업데이트하려고 합니다.나는 단지 종이 요소들을 일반적인 빌딩 블록으로 사용하고 있고 커스텀 폴리머 코드를 작성하고 있지 않다는 것을 말해야 합니다.

지금까지 저는 중첩 폴리머 요소를 다루는 두 가지 문제에 부딪쳤기 때문에 솔루션은 동일하거나 적어도 매우 유사할 것으로 생각합니다.

---

문제1

사용.ng-repeat종이쪽지에

HTML 코드(각형 템플릿 구문 포함)

<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

지도에 마커를 표시하기 위해 구글 맵을 사용하려고 합니다.지도의 중심은 맞지만 마커가 없습니다.

HTML 코드(각형 템플릿 구문 포함)

<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

폴리머 요소를 네스팅하고 Angular double-mustache 구문을 사용하면 내부 폴리머 요소가 Angular code가 아닌 폴리머 코드로 취급하기 때문에 충돌이 발생할 수 있습니다.

이 문제를 해결할 방법이 있습니까?

Material Design(웹 기반 앱의 경우 올바른 테마를 사용하는 것으로 요약됨)을 사용하는 것이 목표라면 방금 Angular Material(https://material.angularjs.org/latest/ #/)을 보았습니다.그게 도움이 될까요?

첫번째 문제는 다음을 이용하여 해결할 수 있습니다.

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

Justin Fagnani가 코멘트에서 언급한 바와 같이, 폴리머 문서에 명시된 것과 약간 다른 구문으로, 그렇지 않으면 Firefox/IE에서 인식되지 않습니다. https://github.com/Polymer/polymer/issues/1844 를 참조하십시오.

하지만 쉐이드 DOM으로 도입된 성능 개선은 없을 것으로 예상됩니다.

언급URL : https://stackoverflow.com/questions/30683791/mixing-polymer-1-0-and-angular-1-x