javascript - Material Design Lite 与 AngularJS 的集成

Question

我知道Angular Material有助于实现在 Angular 单页应用程序中使用的 Material Design 规范。

但是，我正在研究与我的 Angular 项目集成的Material Design Lite替代方案。我想知道将 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 编写的完整 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();
  })
});

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