ngMaterial嵌套側邊欄

我想通過單擊側邊欄中的一個按鈕來替換當前的側邊欄，但這不起作用。ngMaterial嵌套側邊欄

正如您在附件中看到的那樣，您應該可以通過單擊「設置」按鈕顯示另一個側欄。

這裏是codepen鏈接：

下面是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(); 
    } 
})

我怎樣才能做到這一點？

問候

來源

2017-02-14 Igino Boffa

從來就注意到你放置你的ng-click="toggleSidenav('settings')"圖標元素中。看來這種元素不支持這種設置。
如果您將ng-click="toggleSidenav('settings')"移動到外部md按鈕，它似乎可以按照您的要求工作。

和平

來源

2017-10-19 21:21:03

ngMaterial嵌套側邊欄

回答

相關問題