Material Design Lite проблемы рендеринга с Angular JS

У меня есть некоторые проблемы с использованием Material Design Lite (getmdl.io ). я следовал шагам, показанным в getmdl.io web для того, чтобы установить его (на самом деле я использую bower), но у меня всегда есть одна и та же проблема, когда я изменяю ng-маршрут в моем вебе, некоторые ресурсы не отображаются должным образом, мне нужно перезагрузить страницу, чтобы получить ее должным образом, например.



Сначала у меня есть это:



плохой рендеринг



Затем, когда я перезаряжаю, я получаю то, что я хочу:



Введите описание изображения здесь



Я не могу понять, почему другие ресурсы, такие как значки google или кнопки, работают правильно, но кнопка меню на навигационной панели и другие ресурсы, такие как этот, должны загружаться на страницу, чтобы правильно отрисовываться.



Я пытаюсь включить библиотеку, используя метод hosted и метод bower.



Есть идеи, что происходит?

426   2  

2 ответов:

Библиотеки, подобные MDL, работают, ожидая загрузки страницы с помощью события DOMContentLoaded, сканируя страницу на предмет таких вещей, как входные элементы и манипулируя ими с помощью JavaScript, чтобы они могли вводить биты и фрагменты, необходимые для работы с их компонентами. Это прекрасно работает на статических веб-сайтах, но событие DOMContentLoaded срабатывает только один раз , поэтому, когда Angular выполняет переход страницы, DOM изменяется без ведома MDL.

Material Design Lite имеет раздел в его FAQ о использовании MDL на динамических веб-сайтах :

Material Design Lite автоматически регистрирует и визуализирует все элементы, помеченные классами MDL при загрузке страницы. Однако в случае, когда вы создаете элементы DOM динамически, вам нужно зарегистрировать новые элементы с помощью функции upgradeElement. Вот как вы можете динамически создать ту же самую поднятую кнопку с рябью, показанную в разделе выше: 

<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button);
  document.getElementById('container').appendChild(button);
</script>

Конечно, это, вероятно, не очень легко сделать в ваш случай, так как вы должны были бы вручную найти каждый новый элемент и вызвать upgradeElement на нем.

Обычно, вместо того, чтобы делать такого рода манипуляции DOM на основе событий, Angular использует директивы для инициирования изменений DOM. Вместо этого рассмотрите возможность использования библиотеки, построенной для взаимодействия с Angular, такой какAngular Material .

4  
2015-09-06 02:38:42

Я пропустил в своем коде эту функцию 

angular.module('app', ['ngRoute']).

    run(function($rootScope, xxxx, xxx){
        $rootScope.$on('$viewContentLoaded', function(event, next) {
            componentHandler.upgradeAllRegistered();
        });
    });

Это сработало идеально! Удачи..

11  
2015-10-30 01:36:35

Comments

    Ничего не найдено.
Click here to cancel reply.