0
サイドバーのボタンの1つをクリックして現在のサイドバーを置き換えたいのですが、これは機能しません。ngMaterial nested sidebar
添付のcodepenからわかるように、「設定」ボタンをクリックして別のサイドバーを表示することができます。
ここcodepenリンクされています
https://codepen.io/anon/pen/apXGPP
ここでは、HTMLコードである：ここで
<div flex layout="column" ng-controller="viewController">
<md-actions layout="row">
<md-button class="md-raised mbp-button-def" ng-click="toggleSidenav('menu')">Menu</md-button>
<md-sidenav class="md-sidenav-left" md-component-id="menu">
<md-list flex>
<md-list-item class="md-menu-header"><h1>Menu</h1></md-list-item>
<md-list-item ><md-button class="menu-button" ><md-icon class="small-icon"
md-svg-icon="img/icons/about.svg"></md-icon>About...</md-button></md-list-item>
<md-list-item ><md-button class="menu-button">Activity</md-button></md-list-item>
<md-list-item ><md-button class="menu-button">Print</md-button></md-list-item>
<md-list-item ><md-button class="menu-button">Help</md-button></md-list-item>
<md-list-item ><md-button class="menu-button">Contact Us</md-button></md-list-item>
<md-divider></md-divider>
<md-list-item ><md-button class="menu-button"><md-icon class="small-icon"
md-svg-icon="img/icons/settings.svg" ng-click="toggleSidenav('settings')"></md-icon>Settings<md-icon class="small-icon right-arrow"
md-svg-icon="img/icons/arrow.svg"></md-button></md-list-item>
<md-list-item ><md-button class="menu-button" ><md-icon class="small-icon"
md-svg-icon="img/icons/logout.svg"></md-icon>Logout</md-button></md-list-item>
</md-list>
</md-sidenav>
<md-sidenav class="md-sidenav-left" md-component-id="settings">
<md-list flex>
<md-list-item class="md-menu-header"><h1>Settings</h1></md-list-item>
<md-list-item ><md-button class="menu-button" ><md-icon class="small-icon"
md-svg-icon="img/icons/trading.svg"></md-icon>Trading</md-button></md-list-item>
<md-list-item ><md-button class="menu-button">Alerts</md-button></md-list-item>
<md-list-item ><md-button class="menu-button">Display</md-button></md-list-item>
<md-divider></md-divider>
<md-list-item ><md-button class="menu-button" ><md-icon class="small-icon"
md-svg-icon="img/icons/back.svg"></md-icon>Back</md-button></md-list-item>
</md-list>
</md-sidenav>
</div>
はコントローラです：
var mbp= angular.module("mbp");
mbp.controller("viewController", function($scope,$mdSidenav){
$scope.currentView = 'mbp';
$scope.setView = function (view){
$scope.currentView = view;
}
$scope.toggleSidenav = function(sidenavId){
$mdSidenav(sidenavId).toggle();
}
})
どのように私はこれを達成することができますか？
よろしく