Angular JS 的 Material Design Lite 渲染问题 [英] Material Design Lite rendering problems with Angular JS

问题描述

我在使用 Material Design Lite(

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

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

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

知道发生了什么吗?

解决方案

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

Material Design Lite 在其常见问题中有一节关于在动态网站上使用 MDL:

<块引用>

Material Design Lite 将在页面加载时自动注册和呈现所有标有 MDL 类的元素.但是，在动态创建 DOM 元素的情况下，您需要使用 upgradeElement 函数注册新元素.以下是如何动态创建具有上述部分中显示的波纹的相同凸起按钮:

<脚本>var button = document.createElement('button');var textNode = document.createTextNode('点击我！');button.appendChild(textNode);button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';componentHandler.upgradeElement(button);document.getElementById('container').appendChild(button);

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

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

I have some problems using Material Design Lite (getmdl.io). I followed the steps showed in the getmdl.io web in order to install it (actually I use bower), but I always have the same problem, when I change the ng-route in my web, some resources don't render properly, I need to reload the page to get it properly rendered, for example.

First I have this:

then when I reload, I get what I want:

What I cant understand is why other resources like google icons or buttons work correctly but the menu button on the nav bar and other resources like this one need to reaload the page in order to render properly.

I try to include the library using the hosted method and bower method.

Any idea what is going on?

解决方案

Libraries like MDL work by waiting for the page to load using the DOMContentLoaded event, scanning the page for things like input elements and manipulating them with JavaScript so that they can inject the bits and pieces needed to work with their components. This works fine on static websites, but the DOMContentLoaded event only fires once, so when Angular performs a page transition, the DOM changes without MDL knowing about it.

Material Design Lite has a section in its FAQ about using MDL on dynamic websites:

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here is how you can dynamically create the same raised button with ripples shown in the section above:

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

Of course, this probably isn't terribly easy to do in your case, since you'd have to manually find each new element and call upgradeElement on it.

Usually, instead of doing this sort of event-based DOM manipulation, Angular uses directives to initiate DOM changes. Consider using a library built to interoperate with Angular, instead, such as Angular Material.

这篇关于Angular JS 的 Material Design Lite 渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！