Question

我创建了一个md-sidenav。我希望默认情况下保持sidenav处于打开状态，但我仍然希望显示sidenav覆盖页面，我希望能够关闭sidenav - 因此我不会想要使用md-is-locked-open表达式。我有什么想法可以做到这一点？

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

谢谢！

Answer 1

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

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

Answer 2

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

的按钮

Answer 3

＆＃34;默认＆＃34;我假设你的意思是在初始页面加载时打开。我通过像你一样制作sidenav toggle功能来实现这一目标......

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

然后在文档准备就绪时调用此函数......

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

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

保持md-sidenav默认打开

3 个答案: