Question

我想使用侧边菜单：

<ion-side-menus enable-menu-with-back-views="true">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-positive" align-title="center">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

    <ion-side-menu side="left" width="300">
        <ion-content>
            <div class="list">
                <a class="item item-icon-left left no-border" ui-sref="app.home" menu-close>
                    <i class="icon menu-icon ion-home"></i>
                    <h2>Hom</h2>
                </a>
                <a class="item item-icon-left left no-border" ui-sref="app.account" menu-close>
                    <i class="icon menu-icon ion-person"></i>
                    <h2>Item 1</h2>
                </a>
                <a class="item item-icon-left left no-border" ui-sref="app.orders" menu-close>
                    <i class="icon menu-icon ion-android-list"></i>
                    <h2>Item 2</h2>
                </a>
            </div>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

正如你可以看到即时通讯使用menu-close指令，因为我想在单击某个项目时隐藏侧边菜单。问题是使用此menu-close指令将所选项的状态设置为根。这意味着，如果我按下后退按钮，我将无法导航回来。

当我点击某个项目而不将所选视图设置为状态的根目录时，如何关闭菜单？

Answer 1

我在菜单项控制器中解决了这个问题：

angular.module("App.Home", [])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state("app.home", {
        url: "/home",
        views: {
            "menuContent": {
                templateUrl: "templates/menu_home.html",
                controller: "HomeController"
            }
        }
    });
})

.controller("HomeController", function($scope, $ionicSideMenuDelegate) {
    $ionicSideMenuDelegate.toggleLeft(false);
});

编辑

以下是更好的解决方案：

只需在侧边菜单中添加一个控制器：

<ion-side-menu side="left" width="300" ng-controller="MenuController">

这是给你的控制器：

angular.module("App.Menu")

.controller("MenuController", function($scope, $ionicSideMenuDelegate) {
    $scope.toggleMenu = function() {
        if($ionicSideMenuDelegate.isOpenLeft()) {
            $ionicSideMenuDelegate.toggleLeft(false);
        } else {
            $ionicSideMenuDelegate.toggleLeft(true);
        }
    }
});

在菜单项中，您只需致电：

<a class="item item-icon-left item-left item-no-border" ui-sref="app.home" ng-click="toggleMenu()">

一切都像魅力一样。

离子：关闭侧面菜单但不要将状态设置为root

1 个答案: