Ich verwende eckigen material und ui-router in meinem projekt. Ich versuche, eine Symbolleiste, SideNav und Footer-Code für alle Seiten zu verwenden. Das bedeutet, dass jede in eingefügte Ansicht viewname: menucontent von menu.html die Symbolleiste und SideNav und Footer enthält.
Ich habe den ursprünglichen Code kurz geschnitten. Alle Ansichten befinden sich in einem Ordner namens Vorlagen. Die Anmeldesicht funktioniert gut, da diese Ansicht keine Symbolleiste, SideNav und Fußzeile benötigt. Die Seitenlistenansicht ist auch sichtbar, wenn ich die Menüansicht nicht als übergeordnete Ansicht verwende.eckigen material und ui router - funktioniert nicht
Problem ist
1. ich die verkorksten Toolbar und Fußzeile sehen. Ich denke, ich verwende falsche eckige Materialrichtlinien.
2. md-content oder ui-view (der Hauptinhaltsbereich ist leer).
Ich habe versucht, eine codepen zu machen, aber es funktioniert nicht http://codepen.io/brunocoder/pen/YWOGvV Hier ist der Screenshot von Seiten messed up page and desired look of the page
hier ist mein Code 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;
}
Danke
Dank für den Fang
Änderung html Code
Und ändern. Ich werde es reparieren. aber das Problem ist nicht mit href. Problem ist holt nicht den Code, der auf page-list.html geschrieben wird. –
brunocoder