我知道Angular Material,它有助于实现Material Design规范,并用于Angular单页应用程序。
然而,我正在查看Material Design Lite这个备选方案,以集成到我的Angular项目中。我想知道将Material Design Lite与AngularJS应用程序集成的最佳方法。
我知道Angular Material,它有助于实现Material Design规范,并用于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
。我相信您正在寻找一个在Material Design Lite之上的angular封装。
现在有这个包正在积极开发中,它已经实现了一些具有可配置选项的指令(如浮动文本字段)http://jadjoubran.github.io/angular-material-design-lite/
如果您想要一个完整的UI,并且使用angular编写,那么您可以使用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;
});
*/
});
问题已解决!
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
});
});