Angular JS 的 Material Design Lite 渲染问题答案

【问题标题】：Material Design Lite rendering problems with Angular JSAngular JS 的 Material Design Lite 渲染问题
【发布时间】：2015-09-05 23:21:57
【问题描述】：

我在使用 Material Design Lite (getmdl.io) 时遇到了一些问题。我按照 getmdl.io web 中显示的步骤进行安装（实际上我使用 bower），但我总是遇到同样的问题，当我在我的 web 中更改 ng-route 时，某些资源无法正确呈现，例如，我需要重新加载页面以使其正确呈现。

首先我有这个：

然后当我重新加载时，我得到了我想要的：

我无法理解的是为什么其他资源（如谷歌图标或按钮）可以正常工作，但导航栏上的菜单按钮和其他类似资源需要重新加载页面才能正确呈现。

我尝试使用托管方法和 bower 方法包含库。

知道发生了什么吗？

【问题讨论】：

标签： angularjs material-design angular-material

【解决方案1】：

我在我的代码中添加了这个函数

angular.module('app', ['ngRoute']).

    run(function($rootScope, xxxx, xxx){
        $rootScope.$on('$viewContentLoaded', function(event, next) {
            componentHandler.upgradeAllRegistered();
        });
    });

效果很好！祝你好运..

【讨论】：

完美，这将正确呈现您的角度页面。所有想要使用 MDL 和 Angular 的开发人员都必须这样做。
太棒了！你只要救我！此答案必须标记为最佳答案。
在调用 upgradeAllRegistered() 时添加 $timeout 对我有用。谢谢！
这是角度 1，而不是 2

【解决方案2】：

像 MDL 这样的库的工作方式是使用 DOMContentLoaded 事件等待页面加载，扫描页面以查找输入元素等内容，并使用 JavaScript 操作它们，以便它们可以注入使用其组件所需的点点滴滴。这在静态网站上运行良好，但 DOMContentLoaded 事件仅触发一次，因此当 Angular 执行页面转换时，DOM 会在 MDL 不知情的情况下发生变化。

Material Design Lite 在其常见问题解答中有一个关于using MDL on dynamic websites 的部分：

Material Design Lite 将在页面加载时自动注册并呈现所有标记为 MDL 类的元素。但是，在动态创建 DOM 元素的情况下，您需要使用 upgradeElement 函数注册新元素。以下是如何动态创建上一节中显示的带有波纹的相同凸起按钮：
<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button);
  document.getElementById('container').appendChild(button);
</script>

当然，在您的情况下，这可能并不容易做到，因为您必须手动找到每个新元素并在其上调用 upgradeElement。

通常，Angular 不会进行这种基于事件的 DOM 操作，而是使用指令来启动 DOM 更改。考虑使用为与 Angular 互操作而构建的库，例如 Angular Material。

【讨论】：

嗯，我明白了，我认为 Material Design lite 就像 bootstrap 一样工作......但显然不是！ :P 非常感谢亚历克西斯！