材质设计不适用于Angular状态

Question

Material design features not working while using Angular states. 使用Angular状态时，材料设计功能不起作用。

My set up is as follows: 1. index.html contains all styles and scripts 2. layout.html contains elements of the page layout and UI-VIEW 3. and partial pages are the rest 我的设置如下：1. index.html包含所有样式和脚本2. layout.html包含页面布局和UI-VIEW的元素3.其余页面为其余部分

index.html 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 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 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

I know its late, but just had the same issue and maybe can help someone else. 我知道它来晚了，但是遇到了同样的问题，也许可以帮助别人。

Using Material Design Lite in an Angular app (1.x) with nested views (courtesy of ui-router), not all the MDL components display correctly in the nested views - but it works ok if you place it all in the index file. 在具有嵌套视图的Angular应用程序（1.x）中使用Material Design Lite（由ui-router提供），并非所有MDL组件都能在嵌套视图中正确显示-但是，如果将它们全部放置在索引文件中，则可以正常工作。

adding the following to your angular.run function ensures the components get rendered correctly: 将以下内容添加到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 个解决方案

解决方案1
0 2017-05-23 13:04:20

材质设计不适用于Angular状态

问题描述

1 个解决方案

解决方案1 0 2017-05-23 13:04:20

解决方案1
0 2017-05-23 13:04:20