0
角度のある素材のような簡単なテンプレートをYoutubeのように作成したかったのです。 しかし、私はサイドバーのナビゲーションの問題でちょっと固まっています。テンプレート で可能である必要があります。1.画面のサイズに応じて、サイドバーを開くときにサイドバーを開く必要があります。 2.ブラウザのサイズが変更された場合、サイドバーは自動的に/ showを表示します。 3.メニューボタン左上がクリックされると、サイドバーはページの一部として切り替える必要があります（オーバーレイではありません）。スクリーンサイズが十分小さい場合にのみオーバーレイにすることができます。サイドバーのトグルが角度のある素材で機能しない
ナビゲーションバーとサイドバーのメニューボタンは、異なるコントローラにあります。だから私はクリックイベントとその成果を共有するための工場を書かれている
HTMLのHTMLコードは
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" />
<style>
.add-vertical-shadow{
-webkit-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
}
</style>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<!-- User js files here -->
<script src="main.js"></script>
<script>
</script>
</head>
<body ng-app="mainApp" layout="column">
<div ng-cloak="" class="toolbardemoBasicUsage" layout="column">
<md-toolbar class="md-hue-2 add-vertical-shadow" ng-controller="navCtrl">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="menu" ng-click="toggleClicked()">
<md-icon aria-label="Menu" class="material-icons">menu</md-icon>
</md-button>
<h2 flex="" md-truncate="">MyApp</h2>
<md-button class="md-icon-button" aria-label="more_vert">
<md-icon aria-label="more_vert" class="material-icons">more_vert</md-icon>
</md-button>
</div>
</md-toolbar>
<!-- this will contain the main body and the sidebar -->
<md-content flex >
<div layout="vertical" ng-controller="sidebarCtrl" layout-fill>
<!-- Sidebar start -->
<md-sidenav class="md-sidenav-left md-whiteframe-4dp" md-component-id="leftSideBar" md-is-locked-open="{{hide}}">
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input id="testInput" type="text" ng-model="data" />
</md-input-container>
</form>
</md-sidenav>
<!-- Sidebar end -->
<!-- Main Body start -->
<md-content flex layout-padding>
Main body
</md-content>
<!-- Main Body end -->
</div>
</md-content>
</div>
</body>
</html>
以下のようであるとjsがすべてのヘルプは大歓迎です
var mainApp = angular.module('mainApp',['ngMaterial']);
mainApp.factory('toggleSidebar', function($mdSidenav, $mdMedia){
return {
hide : $mdMedia('gt-xs'),
toggle : function(sidebarElement){
$mdSidenav(sidebarElement).toggle();
this.hide = !this.hide;
}
};
});
mainApp.controller('navCtrl', function($scope, toggleSidebar) {
$scope.toggleClicked = function(){
toggleSidebar.toggle('leftSideBar');
console.log('hide : ' + toggleSidebar.hide);
}
});
mainApp.controller('sidebarCtrl', function($scope, toggleSidebar) {
$scope.hide = toggleSidebar.hide;
});
ファイル。