ngMaterial 嵌套侧边栏答案

【问题标题】：ngMaterial nested sidebarngMaterial 嵌套侧边栏
【发布时间】：2017-07-02 16:53:27
【问题描述】：

我想通过单击边栏中的某个按钮来替换当前边栏，但这不起作用。

正如您在随附的代码笔中看到的那样，您应该能够通过单击“设置”按钮来显示另一个侧边栏。

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

我怎样才能做到这一点？

问候

【问题讨论】：

标签： html angularjs material-design

【解决方案1】：

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

和平相处

【讨论】：