javascript Material Design Lite 与 AngularJS 的集成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31278781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Material Design Lite Integration with AngularJS
提问by dantheta
I am aware of Angular Materialwhich helps implement Material Design specification for use in Angular single-page applications.
我知道Angular Material，它有助于实现用于 Angular 单页应用程序的 Material Design 规范。
I'm however taking a look at Material Design Litealternative to integrate with my Angular project. I will like to know the best way to go about integrating Material Design Lite with and AngularJS app.
但是，我正在查看Material Design Lite替代方案以与我的 Angular 项目集成。我想知道将 Material Design Lite 与 AngularJS 应用程序集成的最佳方式。
回答by mpint
Emjay's second answer worked for me. You can additionally reduce boilerplate by tossing the upgradeAllRegisteredmethod into Angular's runblock:
Emjay 的第二个答案对我有用。您还可以通过将upgradeAllRegistered方法扔到 Angular 的run块中来减少样板：
angular.module('app', [])
.run(function ($rootScope,$timeout) {
$rootScope.$on('$viewContentLoaded', ()=> {
$timeout(() => {
componentHandler.upgradeAllRegistered();
})
})
});
回答by Jad Joubran
Disclaimer: I am the author of this project
免责声明：我是这个项目的作者
You can use Material Design Litein your angular apps.
I believe you're looking for an angular wrapper on top of Material Design Lite.
您可以Material Design Lite在您的角度应用程序中使用。
我相信您正在寻找 Material Design Lite 之上的有角度的包装。
There's this package under heavy development and it already has some directives implemented with configurable options (floating text fields) http://jadjoubran.github.io/angular-material-design-lite/
这个包正在大量开发中，它已经有一些使用可配置选项（浮动文本字段）实现的指令http://jadjoubran.github.io/angular-material-design-lite/
If you want a full UI written in angular, you can use Angular Material
如果你想要一个完整的用 angular 编写的 UI，你可以使用Angular Material
回答by Douglas Bernardes
I was having this problem rendering, more design elements dynamically using javascript CDM (eg menu) it was not rendered correctly. I created a solution to run componentHandler.upgradeDom () only when a new element is added:
我在渲染时遇到了这个问题，更多的设计元素使用 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;
});
*/
});
Problem solved!
问题解决了！
回答by kelsmj
You can include the .css and .js files like instructed on the Material Design Lite website, then just do the following when bootstrapping your app or when a controller loads.
您可以按照 Material Design Lite 网站上的说明包含 .css 和 .js 文件，然后在引导您的应用程序或加载控制器时执行以下操作。
angular.element(document).ready(
function() {
componentHandler.upgradeAllRegistered();
});
or
或者
$scope.$on('$viewContentLoaded', () => {
$timeout(() => {
componentHandler.upgradeAllRegistered();
})
});
回答by John Hardy
There is a less brute force way to upgrade the elements: no need for checking intervals or upgrading the whole DOM when something changes. MutationObserver already tells you exactly what's changed.
有一种不那么暴力的升级元素的方法：当某些事情发生变化时，不需要检查间隔或升级整个 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
});
});
