Question

使用Angular状态时，材质设计功能无法正常工作。

我的设置如下： 1. index.html包含所有样式和脚本 2. layout.html包含页面布局和UI-VIEW的元素 3.部分页面是其余部分

的index.html

 <!DOCTYPE html>
<html lang="en" ng-app="myApp">
	<head>
		<title>Material Admin - Form basic</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="your,keywords">
		<meta name="description" content="Short explanation about this website">
		<link href='http://fonts.googleapis.com/css?family=Roboto:300italic,400italic,300,400,500,700,900' rel='stylesheet' type='text/css'/>
		<link type="text/css" rel="stylesheet" href="css/bootstrap.css?1422792965" />
		<link type="text/css" rel="stylesheet" href="css/materialadmin.css?1425466319" />
		<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css?1422529194" />
		<link type="text/css" rel="stylesheet" href="css/material-design-iconic-font.min.css?1421434286" />
	</head>
	<body class="menubar-hoverable header-fixed ">
		
		<!-- BEGIN JAVASCRIPT -->
		<script src="js/Mdesign/jquery-1.11.2.min.js"></script>
		<script src="js/Mdesign/jquery-migrate-1.2.1.min.js"></script>
		<script src="js/Mdesign/bootstrap.min.js"></script>
		<script src="js/Mdesign/spin.min.js"></script>
		<script src="js/Mdesign/jquery.autosize.min.js"></script>
		<script src="js/Mdesign/jquery.nanoscroller.min.js"></script>
		<script src="js/Mdesign/App.js"></script>
		<script src="js/Mdesign/AppNavigation.js"></script>
		<script src="js/Mdesign/AppOffcanvas.js"></script>
		<script src="js/Mdesign/AppCard.js"></script>
		<script src="js/Mdesign/AppForm.js"></script>
		<script src="js/Mdesign/AppNavSearch.js"></script>
		<script src="js/Mdesign/AppVendor.js"></script>
		<script src="js/Mdesign/Demo.js"></script>

		<script src="js/Dependencies/angular.js"></script>
		<script src="js/Dependencies/angular-ui-router.js"></script>
		<script src="js/app.js"></script>
		<!-- END JAVASCRIPT -->

	</body>
</html>

的layout.html

<!-- HEADER BEGINS -->
    <header id="header" >
        <div class="headerbar">
            <div class="headerbar-left">
                <ul class="header-nav header-nav-options">
                    <li class="header-nav-brand" >
                        <div class="brand-holder">
                            <a href="">
                                <span class="text-lg text-bold text-primary">MATERIAL ADMIN</span>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a class="btn btn-icon-toggle menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
                            <i class="fa fa-bars"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- HEADER ENDS -->

    <!-- BASE BEGINS -->
    <div id="base">
        <div id="content">
        <!-- SECTION BEGINS - our UI-VIEW goes here -->
            <section>
                <div class="container">
                    <div ui-view>

                    </div>
                </div>
            </section>
        <!-- SECTION ENDS -->
        </div>

        <!-- BEGIN MENUBAR-->
        <div id="menubar" class="menubar-inverse ">
            <div class="menubar-fixed-panel">
                <div>
                    <a class="btn btn-icon-toggle btn-default menubar-toggle" data-toggle="menubar" href="javascript:void(0);">
                        <i class="fa fa-bars"></i>
                    </a>
                </div>
                <div class="expanded">
                    <a href="../../html/dashboards/dashboard.html">
                        <span class="text-lg text-bold text-primary ">MATERIAL&nbsp;ADMIN</span>
                    </a>
                </div>
            </div>
            <div class="menubar-scroll-panel">

                <!-- BEGIN MAIN MENU -->
                <ul id="main-menu" class="gui-controls">
                    <li>
                        <a href="">
                            <div class="gui-icon"><i class="md md-home"></i></div>
                            <span class="title">Dashboard</span>
                        </a>
                    </li>
                    <li class="gui-folder">
                        <a>
                            <div class="gui-icon"><i class="md md-email"></i></div>
                            <span class="title">Email</span>
                        </a>
                    </li>
                </ul>
                <!-- END MAIN MENU -->

                <!-- FOOTER COPYRIGHT BEGINS-->
                <div class="menubar-foot-panel">
                    <small class="no-linebreak hidden-folded">
                        <span class="opacity-75">Copyright &copy; 2014</span> <strong>Vinayak</strong>
                    </small>
                </div>
                <!-- FOOTER COPYRIGHT ENDS -->
            </div>
        </div>
        <!-- END MENUBAR -->
    </div>
    <!-- END BASE -->

app.js

var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  $stateProvider
    .state('index', {
      url: '',
      templateUrl: 'index.html'
    })
    .state('layout', {
      url: '',
      templateUrl: 'pages/layout.html'
    })
    .state('page1', {
      url: '/page1',
      templateUrl: 'pages/page1.html'
    })
    .state('page2', {
      url: '/page2',
      templateUrl: 'pages/page2.html'
    })

});

Answer 1

我知道它已经很晚了，但也有同样的问题，也许可以帮助其他人。

在具有嵌套视图的Angular应用程序（1.x）中使用Material Design Lite（由ui-router提供），并非所有MDL组件都在嵌套视图中正确显示 - 但如果将所有内容放在索引文件。

将以下内容添加到angular.run函数中可确保正确呈现组件：

app.run(function($rootScope, $timeout) {

    // Required so that MDL components render correctly when using nested views
    $rootScope.$on('$viewContentLoaded', function() {
        $timeout(function() {
        componentHandler.upgradeAllRegistered();
    })
})

材料设计不适用于Angular状态

1 个答案: