Material Design Lite与AngularJS集成

Question

我知道Angular Material有助于实现Material Design规范,以便在Angular单页面应用程序中使用.

然而,我正在考虑使用Material Design Lite替代我的Angular项目.我想知道将Material Design Lite与AngularJS应用程序集成的最佳方法.

Answer 1

Emjay的第二个答案对我有用.您可以通过将upgradeAllRegistered方法抛入Angular的run块来减少样板:

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

Answer 2

免责声明:我是这个项目的作者

您可以Material Design Lite在角度应用中使用.
我相信你正在寻找Material Design Lite顶部的角度包装.

这个包正在大量开发中,它已经有一些使用可配置选项(浮动文本字段)实现的指令http://jadjoubran.github.io/angular-material-design-lite/

如果您想要以角度编写的完整UI,则可以使用Angular Material

Answer 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;
    });
    */
});

问题解决了!

Answer 4

您可以像在Material Design Lite网站上指示的那样包含.css和.js文件,然后在引导应用程序或加载控制器时执行以下操作.

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

要么

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