Material Design Lite 集成 AngularJS

Question

我知道 Angular Material 这有助于实施 Material 用于 Angular 单页应用程序的设计规范。

不过，我正在查看 Material Design Lite 替代方案以与我的 Angular 项目集成。我想知道将 Material Design Lite 与 AngularJS 应用程序集成的最佳方式。

Answer 1

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

您可以在 angular 个应用中使用 Material Design Lite。
我相信您正在 Material Design Lite 之上寻找 angular 包装器。

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

如果你想要完整的UI写成angular，你可以使用Angular Material

Answer 2

您可以按照 Material Design Lite 网站上的说明包含 .css 和 .js 文件，然后在引导您的应用程序或加载控制器时执行以下操作。

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

或

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

Answer 3

Emjay 的第二个答案对我有用。您还可以通过将 upgradeAllRegistered 方法放入 Angular 的 run 块中来减少样板代码：

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

Answer 4

我在渲染时遇到了这个问题，使用 javascript CDM 动态设计的更多元素（例如菜单）未正确渲染。我创建了一个解决方案运行 componentHandler.upgradeDom () only when a new element is added:

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 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

Material Design Lite Integration with AngularJS

javascript

angularjs

material-design-lite