В моем проекте используется угловой материал и ui-router. Я пытаюсь использовать одну панель инструментов, sidenav и нижний колонтитул для всех страниц. Это означает, что каждый вид, вставленный в viewname: menucontent из menu.html, будет иметь панель инструментов и сиден и нижний колонтитул.
Я обрезал оригинальный код. Все изображения находятся внутри папки, названной в качестве шаблонов. Функция входа прекрасно работает, так как для этого представления не требуется панель инструментов, сиденья и нижний колонтитул. Pagelist view также отображается, когда я не использую представление меню в качестве родительского представления.угловой материал и ui router - не работает
Проблема
1. Я могу видеть перепутались панель и нижний колонтитулы. Я думаю, что я использую неправильные директивы о угловых материалах.
2. md-content или ui-view (основная область содержимого пуста).
Я попытался сделать codepen, но ее не работает http://codepen.io/brunocoder/pen/YWOGvV Вот скриншот страницы messed up page and desired look of the page
вот мой код HTML
<html lang="en" >
<head>
<title>Angular Material</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
<link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"/>
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body layout="row" flex ng-app="myApp">
<div class="fill-height">
<div ui-view layout="column" flex >
<md-content>
</md-content>
</div>
</div>
<script type="text/ng-template" id="menu.html">
<md-sidenav md-component-id="left" md-is-open="isSidenavOpen" class="md-sidenav-left">
<md-toolbar class="md-hue-2">
Left Nav!
</md-toolbar>
</md-sidenav>
<md-sidenav md-component-id="right" class="md-sidenav-right">
<md-toolbar class="md-hue-2">
Right Nav!
</md-toolbar>
</md-sidenav>
<md-toolbar class="md-hue-2" ng-controller="MenuController">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings" ng-click="openLeftMenu()">
<i class="material-icons">menu</i>
</md-button>
<h2 layout="row" layout-align="center center">
<p>Pagelist</p>
</h2>
<span flex></span>
<md-button class="md-icon-button" aria-label="More" ng-click="openRightMenu()" >
<i class="material-icons">more_vert</i>
</md-button>
</div>
</md-toolbar>
<footer>
<md-toolbar class="md-scroll-shrink">
<div layout="row" layout-align="center center" flex>
FOOTER INFO
</div>
</md-toolbar>
</footer>
</script>
<script type="text/ng-template" id="page-list.html">
<div ng-controller="HomepageController" layout="column" flex>
<md-content layout="column" flex >
<main flex>
<md-list ng-repeat="page in pagelists">
<md-list-item class="md-2-line" ui-sref="#/app/{{page.url}}">
<i class="material-icons">{{page.icon}}</i>
<div class="md-list-item-text">
<p>{{page.title}}</p>
</div>
</md-list-item>
<md-divider></md-divider>
</md-list>
</main>
</md-content>
</div>
</script>
<!-- Angular Material Dependencies -->
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../node_modules/angular-animate/angular-animate.js"></script>
<script src="../node_modules/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="../node_modules/angular-material/angular-material.js"></script>
<script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</body>
</html>
JS
(function(angular, undefined) {
'use strict';
var app = angular.module('myApp', ['ngMaterial', 'ngMdIcons', 'ui.router']);
app.config(function($mdThemingProvider, $stateProvider, $urlRouterProvider) {
//states starts here
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'MenuController'
})
.state('app.page-list', {
url: "/page-list",
views: {
'menuContent' :{
templateUrl: "templates/page-list.html",
controller: 'HomepageController'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
app.controller('MenuController', function($scope, $mdSidenav) {
$scope.isSidenavOpen = false;
$scope.openLeftMenu = function() {
$mdSidenav('left').toggle();
};
$scope.openRightMenu = function() {
$mdSidenav('right').toggle();
};
$scope.$watch('isSidenavOpen', function(isSidenavOpen) {
});
});
app.controller('HomepageController',[ '$scope', '$state' , function($scope, $state, $stateParams) {
$scope.pagelists =[
{ title: 'List item 1', id: 1, url: 'page1', },
{ title: 'List item 2', id: 2, url: 'page2', },
{ title: 'List item 3', id: 3, url: 'page3', }
];
}]);
})(angular);
CSS
.fill-height{
display: flex;
flex: 1;
min-height: 100%;
}
.fill-height > div{
min-height: 100%;
display: flex;
}
Спасибо
спасибо за уловом. Я починю это. но проблема не в href. Проблема не извлекает код, написанный на странице list.html. –
brunocoder