清爽材质精简设计，随机展示答案

【问题标题】：Refreshing material lite desing, random display清爽材质精简设计，随机展示
【发布时间】：2015-11-23 06:09:22
【问题描述】：

我正在使用Material Design 和 Angularjs，但显示是随机的。

material-lite.css 似乎有时会按时加载，有时不会。

索引.html：

<html>
  <head>
  <meta charset="utf-8">
  <title>title</title>

  <!-- META TAG -->

  <link rel="stylesheet" href="styles/material.indigo-deep_purple.min.css"/>
  <link rel="stylesheet" href="styles/styles.css">
  <link rel="stylesheet" href="styles/autocomplete.css">
  <link rel="stylesheet" href="styles/ngDialog.min.css"/>
  <link rel="stylesheet" href="styles/ngDialog-theme-default.min.css"/>
  <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  </head>
  <body ng-app="tdcWebappApp">

   <div ng-view=""></div>
   </div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/ngDialog/js/ngDialog.min.js"></script>

<script src="scripts/material.min.js"></script>
<script src="scripts/autocomplete.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>

 </body>
</html>

singin.html：

<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header" >
 <main class=" mdl-layout__content mdl-color--grey-100 ">
  <form>
   <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
    <div class="mdl-tabs__tab-bar">
      <a href="#identity" class="mdl-tabs__tab is-active">Identité</a>
      <a href="#registration" class="mdl-tabs__tab" >Adhésion</a>
      <a href="#activities" class="mdl-tabs__tab">Activités</a>
      <a href="#payment" class="mdl-tabs__tab" ng-click="display()">Règlement</a>
    </div>

    <div class="mdl-tabs__panel is-active" id="identity">
     ...
    </div>
    ...
   </div>
  </form>
 </main>
</div>

拜托，你能解释一下这是什么机制吗？

谢谢

【问题讨论】：

标签： css angularjs material-design

【解决方案1】：

如果在 windows.load 之后添加元素，则必须手动升级 dom，因为 material-design-lite 不知道有新元素。 material-lite 添加了一个名为 componentHandler 的全局对象。只需在添加新的 material-lite 元素后执行此操作即可。

componentHandler.upgradeDom();
//OR
componentHandler.upgradeElement(element);

material-design-lite code

【讨论】：