Интеграция Material Design Lite с AngularJS

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

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

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

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

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

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

У меня была эта проблема с рендерингом, больше элементов дизайна динамически использовало 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;
    });
    */
});

Задача решена!

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

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

or

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

Существует менее грубый способ обновления элементов: нет необходимости проверять интервалы или обновлять весь 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
  });
});