Дизайн материала не работает с угловыми состояниями

0

Конструктивные особенности материала не работают при использовании угловых состояний.

Моя настройка выглядит следующим образом: 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'
    })

});
  • 0
    Может быть, вы могли бы указать, в чем проблема.
  • 0
    Offcanvas не работает, если я разделяю HTML-элементы в layout.html, но работает, если я храню все скрипты, стили и представления внутри index.html.
Показать ещё 1 комментарий
Теги:
angular-ui-router
material-design

1 ответ

0

Я знаю его поздно, но у меня была одна и та же проблема и, возможно, может помочь кому-то другому.

Используя Material Design Lite в угловом приложении (1.x) с вложенными представлениями (любезно предоставлен ui-router), не все компоненты MDL отображаются правильно во вложенных представлениях, но он работает нормально, если вы поместите все это в индексный файл.

добавив следующее к вашей функции angle.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();
    })
})

Ещё вопросы

Сообщество Overcoder
Наверх
Меню