材質設計不適用於Angular狀態

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 個解決方案

解決方案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