保持 md-sidenav 默认打开答案

【问题标题】：Keep md-sidenav open by default保持 md-sidenav 默认打开
【发布时间】：2016-06-08 07:52:58
【问题描述】：

我创建了一个md-sidenav。我想保持sidenav默认打开，但我仍然希望sidenav显示在页面上，我希望能够关闭sidenav-因此我不想使用@987654325 @ 表达。有什么想法可以做到这一点吗？

html代码：

<md-button class="md-icon-button hamburger" aria-label="More" ng-click="openLeftMenu()" style="height: auto;">
            <md-icon md-svg-icon="images/menu.svg"></md-icon>

        </md-button>

<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2 menuside" md-component-id="left"> 

    <div class="navheader" layout="row" layout-align="space-between center">

        <!--show location-->
        <md-button ui-sref="map" ng-click="openLeftMenu()" md-ink-ripple="false" class="yourlocation" layout="row" layout-align="start center" aria-label="Current-location">
            <p class="locationtext">{{currentLocation}}</p>
        </md-button>


        <!--close menu-->
        <button class="hambugerclose" ng-click="openLeftMenu()">
            <i class="material-icons">clear</i>
        </button>

    </div>

    <!--MOBILE MENU GRID-->
    <div layout="row" layout-align="center center" class="jumbowrapper2" layout-wrap>
        <div ng-repeat="navitem in navitems" class="navitemwrap" flex="33">
            <md-button md-ink-ripple="false" layout="column" layout-align="center center" ui-sref="{{navitem.path}}" href="{{navitem.link}}" ng-click="openLeftMenu()" class="itembutton">
                <div class="iconoutline" layout="column" layout-align="center center">
                    <md-icon class="itemicon" md-svg-src="{{navitem.icon}}"></md-icon>
                </div>
                <p class="itemtext2" translate>{{navitem.title}}</p>
            </md-button>
        </div>
    </div>

</md-sidenav>

JS代码：

$scope.openLeftMenu = function() {
$mdSidenav('left').toggle();
};

谢谢！

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

我使用 md-is-open 如下代码，它工作正常。

<md-sidenav md-is-open="true"

【讨论】：

【解决方案2】：

“默认”我假设您的意思是在初始页面加载时打开。我通过制作一个与您一样的 sidenav 切换功能来实现这一点......

$scope.openLeftMenu = function() {
  $mdSidenav('left').toggle();
};

然后我在文档准备好时调用这个函数...

angular.element(document).ready(function () {
    $scope.openLeftMenu()
});

这将允许 sidenav 仍然很好地覆盖页面。

【讨论】：

【解决方案3】：

md-is-locked-open 只是设置为等于一个逻辑值。我会使用它并在我的控制器上有一个名为 KeepSideBarOpen 之类的属性，并有一个按钮在单击时将此属性的值设置为 false。（而且我可能会为侧导航使用自定义控制器）。

function sideNavController() {
    var vm = this;
    vm.closeSideNav = closeSideNav;
    vm.sideNavOpen = true;

    function closeSideNav() {
         vm.sideNavOpen = false
    }

}

<md-side-nav md-is-locked-open="ctrl.sideNavOpen">...</md-side-nav>

然后只需在侧导航（或其他地方）中放置一个调用 closeSideNav 的按钮

【讨论】：