使用Angular JS的Material Design Lite渲染问题

Question

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

首先我有这个：

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

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

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

知道发生了什么事吗？

Answer 1

我在我的代码中使用了这个函数

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

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

它完美无缺！祝你好运..

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