Материальная конструкция Lite Интеграция с AngularJS

Я знаю Angular Материал, который помогает внедрить спецификацию Material Design для использования в Angular одностраничных приложениях.

Однако я смотрю Material Design Lite, альтернативу интеграции с моим проектом Angular. Мне бы хотелось узнать, как лучше всего интегрировать Material Design Lite с приложением AngularJS.

Ответ 1

Второй ответ Эмджай работал у меня. Вы можете дополнительно уменьшить шаблон, перебросив метод upgradeAllRegistered в блок Angular run:

angular.module('app', [])
    .run(function ($rootScope,$timeout) {
        $rootScope.$on('$viewContentLoaded', ()=> {
          $timeout(() => {
            componentHandler.upgradeAllRegistered();
          })
        })
      });

Ответ 2

Отказ от ответственности: я являюсь автором этого проекта

Вы можете использовать Material Design Lite в своих приложениях angular.
Я считаю, что вы ищете обертку angular поверх Material Design Lite.

Там этот пакет находится под тяжелой разработкой, и у него уже есть некоторые директивы, реализованные с настраиваемыми параметрами (плавающие текстовые поля) http://jadjoubran.github.io/angular-material-design-lite/

Если вам нужен полный пользовательский интерфейс, написанный в angular, вы можете использовать Angular Материал

Ответ 3

У меня возникала эта проблема при рендеринге, больше элементов дизайна динамически с помощью javascript CDM (например, меню), это было неправильно отображено. Я создал решение для запуска componentHandler.upgradeDom() только при добавлении нового элемента:

var app = angular.module('app');
app.run(function () {
    var mdlUpgradeDom = false;
    setInterval(function() {
      if (mdlUpgradeDom) {
        componentHandler.upgradeDom();
        mdlUpgradeDom = false;
      }
    }, 200);

    var observer = new MutationObserver(function () {
      mdlUpgradeDom = true;
    });
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
    /* support <= IE 10
    angular.element(document).bind('DOMNodeInserted', function(e) {
        mdlUpgradeDom = true;
    });
    */
});

Проблема решена!

Ответ 4

Вы можете включить файлы .css и .js, как указано на веб-сайте Material Design Lite, а затем просто выполните следующее при загрузке приложения или при загрузке контроллера.

angular.element(document).ready( 
      function() {
        componentHandler.upgradeAllRegistered();
    });

или

$scope.$on('$viewContentLoaded', () => {
  $timeout(() => {
    componentHandler.upgradeAllRegistered();
  })
});

Ответ 5

Существует менее грубая сила для обновления элементов: нет необходимости проверять интервалы или обновлять всю DOM, когда что-то меняется. MutationObserver уже сообщает вам, что именно изменилось.

window.addEventListener('load', function() {
  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function( mutation ) {
      if (mutation.addedNodes)
        window.componentHandler.upgradeElements(mutation.addedNodes);
    })
  });
  observer.observe(document.body, {
      childList: true,
      subtree: true
  });
});