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/

如果您想要以角度编写的完整用户界面，可以使用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();
  })
});

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

Material Design Lite与AngularJS集成

5 个答案: