Question

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

似乎有时材料-lite.css会被加载，有时不会。

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

拜托，能告诉我什么是机械故事？

由于

Answer 1

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

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

material-design-lite code

清爽的材料精简设计，随机显示

1 个答案: