材质设计不能在Angular状态下工作
Material design not working with Angular states
材质设计特性在使用Angular状态时不工作。
我的设置如下:1. html包含了所有的样式和脚本2. 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 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 © 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'
})
});
我知道现在很晚了,但我刚刚遇到了同样的问题,也许可以帮助别人。
在一个有嵌套视图的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();
})
})
相关文章:
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 在Angular 2中布线期间保持零部件处于活动状态
- 带有嵌套状态的Angular ui路由器和后退按钮
- 删除处于抽象状态的参数angular
- Angular+bootstrap ui,检查当前选项卡是否已处于活动状态
- Angular JS/UI Router:为给定状态禁用指令
- Angular:如何在状态更改时调用scope方法
- 使用应用程序状态js和视图在angular js url上传递两个参数
- 将变量传递到php页面,作为Angular中的状态
- Angular UI路由器-检查父状态
- angular ui路由器卡在两个状态之间
- 如何正确控制Angular指令的$dirty和$pure状态
- 在加载状态之前,我需要在angular js中为每个状态添加角色
- 在angular js中,每次应用程序进入状态时,重新加载状态的最佳方式是什么
- 如何使用scalajs-angular获取请求的http状态代码
- Angular 状态提供程序,包含“#”的状态名称更改为“#/”
- Angular状态提供程序抛出的问题无法解决状态错误
- Angular状态提供商,在url参数中添加.html无法正常工作
- 材质设计不能在Angular状态下工作
- Angular状态解析不注入控制器