刷新材料设计，随机显示

问题描述：

我使用Material Design和Angularjs，但显示是随机的。刷新材料设计，随机显示

看来有时候material-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>

，能不能请您给我解释一下什么是mecanism？

感谢

答

如果添加windows.load后，你必须手动升级DOM因为材料设计精简版不知道有新元素的元素。 material-lite添加了一个名为componentHandler的全局对象。只需添加新的material-lite元素即可完成此操作。

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

material-design-lite code

刷新材料设计，随机显示

相关推荐