Question

我想点击侧边栏中的一个按钮来替换当前的侧边栏，但这不起作用。

正如您在附带的codepen中看到的那样，您应该可以通过单击“设置”按钮来显示另一个侧边栏。

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

我怎样才能做到这一点？

此致

Answer 1

我注意到您将ng-click="toggleSidenav('settings')"放在图标元素中。似乎这种元素不支持此设置。
如果您将ng-click="toggleSidenav('settings')"移动到外部md按钮，它似乎可以按您的需要工作。

和平

ngMaterial嵌套侧边栏

1 个答案: