Материал начальной загрузки не работает должным образом с динамическими угловыми представлениями

Question

Я включаю сценарии материала-начальной загрузки в index.html моего проекта Angular, но для работы их необходимо вручную включить в представления.

Это странно, так как для всех других скриптов, вставленных в Angular, этого не происходит.

index.html

<script src="bower_components/bootstrap-material-design/scripts/material.js"></script>
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"></script>

Я также заметил, что material-bootstrap плохо работает с Grunt и Bower, и имеет тенденцию удалять себя при сборке (следовательно, руководство включено внизу страницы).

Это известные ошибки с Material-boostrap и Angular/Bower/Grunt или я что-то не так делаю?

Если вам нужно что-то еще, пожалуйста, дайте мне знать!

редактировать:

зависимости в bower.json

"dependencies": {
    "angular": "~1.3.0",
    "json3": "~3.3.1",
    "es5-shim": "~3.1.0",
    "bootstrap": "~3.2.0",
    "angular-resource": "~1.3.0",
    "angular-cookies": "~1.3.0",
    "angular-sanitize": "~1.3.0",
    "angular-animate": "~1.3.0",
    "angular-touch": "~1.3.0",
    "angular-route": "~1.3.0",
    "bootstrap-material-design": "*",
    "jsjws": "~3.0.2",
    "angular-ui-router": "0.2.11"
  }

Answer 1

Проблема заключается в том, что плагин дизайна материала для начальной загрузки работает путем применения преобразований к DOM и не предназначен для автоматической работы с такими фреймворками, как Angular.

Материальная структура требует, чтобы вы объявили скрипт, подобный следующему, чтобы инициализировать компоненты:

<script>
  $.material.init();
</script>

Это означает, что объект "материализуется" при загрузке страницы. Поскольку приложение Angular.js является одностраничным, стиль применяется только к элементам, уже присутствующим на странице (попробуйте добавить новый компонент, также без использования представлений: вы должны получить тот же результат).

Вы получите требуемое поведение (не полностью функциональное), если вы включите сценарии в страницы представлений, потому что Angular.js под капотом загружает страницу представления как обычную страницу, затем берет содержимое dom и объединяет представление дерево с одностраничным деревом.

Я предлагаю вам попытаться добавить вызов $.material.init() после загрузки представления. Будьте осторожны, так как есть проблемы с многократным вызовом init из-за библиотеки ripples. Как указано здесь ( https://github.com/FezVrasta/bootstrap-material-design/issues/184), вам следует избегать ряби для повторного подключения обработчиков событий:

// add the "done" boolean inside ripples.js
window.ripples = { 
    init: function(withRipple) { /*bla bla*/ },
    done: false
}

// Then, where you run ripples.init... (aka, material.js, or maybe directly inside the init function of ripples.js)
if (!window.ripples.done) { 
  ripples.init();
  ripples.done = true;
}