Material Design life与AngularJS的集成

Material Design Lite Integration with AngularJS

本文关键字：集成 AngularJS Design life Material      更新时间：2023-09-26

我知道Angular Material可以帮助实现在Angular单页应用中使用的材质设计规范。

然而，我正在考虑将Material Design Lite替代方案集成到我的Angular项目中。我想知道集成Material Design Lite和AngularJS应用程序的最佳方法。

Emjay的第二个答案对我很管用。你还可以通过把upgradeAllRegistered方法扔进Angular的run块来减少样板文件:

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

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

你可以在angular应用中使用Material Design Lite。
我相信你正在寻找一个有棱角的包装上的材料设计生活。

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

如果你想用angular编写一个完整的UI，你可以使用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;
    });
    */
});

问题解决了!

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

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

或

$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
  });
});
相关文章：