角度材质：当sidenav折叠时显示菜单图标

Question

我使用sidenav在窗口小于1280px时崩溃，方法是设置：md-is-locked-open="$mdMedia('gt-md')" 但我希望它在折叠菜单图标（汉堡按钮）时显示，以便在用户点击菜单时显示菜单。 这是html，我还没有写过任何js。

现在它的行为类似于Angular Material的the demo左侧的Sidenav。

<div id="menu-icon">
            <svg ng-click="showMenu()" fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 0h24v24H0z" fill="none" />
                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
            </svg>
        </div>
        <md-sidenav ng-cloak id="main-layout-sidebar" class="md-sidenav-left md-whiteframe-z2" layout="column" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

            <div ng-cloak class="user-options">
                <div class="content">
                    <div id="user-icon">
                        <md-icon class="picture" md-font-set="material-icons"> account_circle </md-icon>
                    </div>
                    <div id="user-info">
                        <p id="username">{{username}}</p>
                        <md-button ng-click="logout()">Cerrar sesión </md-button>
                    </div>
                </div>
            </div>
            <md-list ng-cloak class="menu">
                <md-list-item ng-repeat="(name, uiref) in items" ng-class="{ active: $state.includes({{uiref}}) }">
                    <a ui-sref={{uiref}}>
                        <md-button class="sidebar-button">
                            {{name}}
                        </md-button>
                    </a>
                </md-list-item>
            </md-list>
        </md-sidenav>

我怎么能实现这种行为？

Answer 1

你可以通过jQuery 或 Angular way 来实现。

通过jQuery：

<强> 的Javascript

https://maps.googleapis.com/…&libraries=places

<强> HTML

$scope.isSidenavOpen = false;  
$scope.$watch('isSidenavOpen', function(isSidenavOpen) {
    if(isSidenavOpen){
        $('#yourButton').fadeIn();
    } else {
        $('#yourButton').fadeOut();
    }
});

Angular方式：

<强> 的Javascript

<button id='yourButton'></button>

<强> HTML

$scope.isSidenavOpen = false;

我没有测试过这段代码，但它应该可行。我记得，<button id='yourButton' ng-hide='isSidenavOpen'></button> 并不需要添加ng-hide。 希望它有所帮助。