Angular：单击元素后关闭 ng-sidenav

【问题标题】：Angular: close ng-sidenav after a click on a elementAngular：单击元素后关闭 ng-sidenav
【发布时间】：2020-04-26 15:23:55
【问题描述】：

使用角度和材质，我在左侧有一个sidenav，用于提供用户的功能（登录、注册...）。

工作正常，但我希望在用户单击菜单后自动关闭栏。目前，酒吧保持营业。

侧边栏代码：

<md-sidenav md-component-id="user_sidenav" class="md-sidenav-left" flex>
    <md-menu-content flex>
        <md-menu-item>
            <md-button ui-sref="app.user-state()">
                <span>
                  User
                </span>
            </md-button>
        </md-menu-item>
        <md-menu-item>
            <md-button ui-sref="vlg.user-other-state()">
                <span>
                  Other
                </span>
            </md-button>
        </md-menu-item>
...

有什么想法吗？

【问题讨论】：

标签： angularjs angularjs-material

【解决方案1】：

我所做的是在控制器中创建一个函数来关闭 sidenav，然后单击调用该函数的元素。

app.controller('AppController', ['$scope', '$mdSidenav',
    function ($scope, $mdSidenav) {

        $scope.close = function () {
            $mdSidenav('left').close();

        };

}]);

然后在html中

<div ng-controller="AppController">
   <!-- Add in code for sidenav-->
     <md-button ng-href="#/path" ng-click="close()"></md-button>
</div>

如果您的元素已经附加了 ng-click，您也可以将以下代码添加到函数中。

.then(function () {
      $mdSidenav('left').close();
});

【讨论】：