Як використовувати значки полімеру основного всередині програми angular.js ..? - угловий, полімерний

Я використовую кутовий.JS побудувати SPA і кутовий матеріал для розробки макета. Але виявляється, що значки кутового матеріалу не є зручними для стиснення CSS, але є піктограми для полімеру. Тому я хочу використовувати полімерні іконки всередині мого програми angular.js .. Я включений polymer.js в моїх сценаріях та імпорті core-icons.html але є помилка ..

Uncaught HierarchyRequestError: Failed to execute "appendChild" on "Node": Nodes of type "HTML" may not be inserted inside nodes of type "#document".

Uncaught TypeError: Cannot read property "resolveDom" of undefined

Як я можу використовувати полімерні значки в моєму додатку angular.js .. ??

Відповіді:

0 для відповіді № 1

Кутовий не розуміє ShadowDOM, що Polymer широко використовує. Отже, коли Angular аналізує та компілює HTML, він не знає, що робити, що використовують власні елементи, так що він викидає помилку.

Але з Polymer 0.8 це може змінитись і може бути сумісним з Angular.

Ще одна річ, яку я помічаю у Вашому питанні, полягає в тому, що Ви додали polymer.js замість webcomponents.js. polymer.js це бібліотека полімерів, яка використовується для створення нових елементів та взаємодії з ними, де вони знаходяться webcomponents.js це поліфайл для самих веб-компонентів.

---

0 для відповіді № 2

Я використовував полімерні іконки в кутовому проекті, використовуючи кутовий матеріал. У моєму випадку я також хотів використати полімерний папір-піктограму-кнопковий елемент, але я виконував його лише за допомогою елемента керування значком.

Мені не потрібно було включати polymer.js, просто:

polymer.html, core-icon.html, core-icons.html

Я використовував паперову кнопку-піктограму, тому я також включив

paper-icon-button.html і я використовував іконку з соціального набору, тому я також включив ядро-піктограми / social-icons.html

для простого ядра-іконки (у мене це було в кнопці, але я не думаю, що це необхідно)

<button ng-click="toggleLeft()" class="rp-menu-button">
<core-icon icon="menu></core-icon>
</button>

CSS (LESS):

.rp-menu-button {
background: none;
border: none;
.rp-menu-icon;
}

.rp-menu-icon {
width: 48px;
height: 48px;
color: @toolbar-font-color;
}

Або для папки-піктограми-кнопки:

<paper-icon-button class="rp-card-paper-icon" id="share" icon="social:share">

CSS (LESS):

.rp-card-paper-icon {
text-align: center;
color: @inactive-icon;
&:hover {
color: @active-icon;
}
}
.rp-card-paper-icon::shadow core-icon {
width: 18px;
height: 18px;
}

.rp-card-paper-icon::shadow #ripple {
width: 33px;
height: 33px;
}

.rp-card-paper-icon#share::shadow #ripple {
color: green;
}

Таким чином, ви встановите колір у класі та розмір ікони в. [Class] :: shadow core-icon, і ви можете використовувати

.rp-card-paper-icon::shadow #ripple

стиль до ефекту пульсації (якщо ви використовуєте кнопку піктограми для паперу)

---