材料设计精简版的渲染问题角度JS [英] Material Design Lite rendering problems with Angular JS

问题描述

我在使用材料设计精简版（ getmdl.io ）的一些问题。我跟着步骤显示，在getmdl.io网络，以便安装它（其实我用的凉亭），但我一直有同样的问题，当我改变我的网络的NG-路线，有些资源不正确地呈现，我需要重新加载页面得到它正确地呈现，例如。

首先，我有这样的：

然后当我重装，我得到我想要的东西：

我不能明白的是为什么像谷歌图标或按钮等资源正常工作，但导航栏和像这样的其他资源上的菜单按钮需要reaload的页面才能正确显示。

我尝试使用托管的方式和方法鲍尔包括图书馆。

任何想法是怎么回事？

解决方案

像MDL工作图书馆通过与JavaScript的等待页面加载使用DOMContentLoaded事件，扫描页面的东西像输入元素和操纵他们，使他们能注射用自己的组件工作所需的点点滴滴。这适用于静态网站很好，但DOMContentLoaded事件仅触发的一次的，所以当角度进行页面转换时，不DOM MDL知道关于它的变化。

材料设计精简版在其关于动态网站使用MDL一节：

  

材料设计精简版会自动注册和渲染标记在网页加载时MDL类的所有元素。但是在您创建DOM元素的情况下动态您需要注册使用 upgradeElement 函数新的元素。这里是你如何可以动态创建在上面的部分显示涟漪一样凸起按钮：

 ＆LT; D​​IV ID =容器/＆GT;
＆LT;脚本＆GT;
  VAR按钮=使用document.createElement（'按钮'）;
  VAR textNode = document.createTextNode（'点击我！'）;
  button.appendChild（textNode）;
  button.className ='MDL-按钮MDL-JS-按钮MDL-JS-涟漪效应;
  componentHandler.upgradeElement（按钮）;
  的document.getElementById（'集装箱'）的appendChild（按钮）。
＆LT; / SCRIPT＆GT;
 

当然，这可能是不太容易在你的情况做的，因为你不得不手动查找每个新的元素，并调用 upgradeElement 就可以了。

一般情况下，而不是做这种基于事件的DOM操作，角使用指令发起DOM变化。请考虑使用内置了库角度，而不是互操作，如角材料。

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.

这篇关于材料设计精简版的渲染问题角度JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！