Question

我想从标签按钮打开侧边菜单。控制台输出＆＃39;打开菜单＆＃39;所以我知道正在调用服务方法，但它不会打开菜单。我哪里错了？

这是我的tabs.html

<ion-tabs class="tabs-super-top tabs-top tabs-icon-left tabs-striped">

    <ion-tab title="More" icon="icon ion-navicon" ng-click="openSideMenu()" >
    </ion-tab>

    <ion-tab title="Events" icon="icon ion-calendar" ui-sref="tab.events">
        <ion-nav-view name="tab-events" class="slide-left-right"  ion-side-menu-content></ion-nav-view>
    </ion-tab>

    <ion-tab title="Involved" icon="icon ion-checkmark-round" ui-sref="tab.involved">
        <ion-nav-view name="tab-involved" class="slide-left-right" ion-side-menu-content></ion-nav-view>
    </ion-tab>

    <ion-tab title="Networks" icon="icon ion-network" ui-sref="tab.networks">
        <ion-nav-view name="tab-networks" class="slide-left-right" ion-side-menu-content></ion-nav-view>
    </ion-tab>


</ion-tabs>

navigation.js模块：

angular.module('navigationModule', [])
.controller('SideMenuController', function($scope, sideMenuService) 
{
    $scope.openSideMenu = function()
    {
        sideMenuService.openSideMenu('sideMenu');
    };
})


.service('sideMenuService', function($ionicSideMenuDelegate) {
    return {
        openSideMenu: function(menuhandle) 
        {
            console.log('open menu');
            return $ionicSideMenuDelegate.$getByHandle(menuhandle).toggleLeft();
        }
    }
})

;

我目前在index.html中有我的sidemenu：

<ion-side-menus side="left" delegate-handle="sideMenu">

    <!-- Center content -->
    <ion-side-menu-content>
        <ion-list>
            <ion-item nav-clear menu-close ng-click="login()">Login</ion-item>
            <ion-item nav-clear menu-close href="#/app/search">Search</ion-item>
            <ion-item nav-clear menu-close href="#/app/browse">Browse</ion-item>
            <ion-item nav-clear menu-close href="#/app/playlists">Playlists</ion-item>
        </ion-list>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left"></ion-side-menu>

    <!-- Right menu -->
    <ion-side-menu side="right"></ion-side-menu>

</ion-side-menus>

这是我的状态：

$stateProvider

    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/common/Tabs.html",
      controller: 'SideMenuController'
    })

Answer 1

修正了它。如果有其他人在这里绊倒...... HTML放置是关键。

Key将html放在离子侧菜单内容块中，如此。

<ion-side-menus delegate-handle="sideMenu">

    <!-- Center content -->
    <ion-side-menu-content>

        <ion-nav-bar class="bar-dark nav-title-slide-ios7">
            <ion-nav-back-button class="button-clear">
                <i class="ion-arrow-left-c"></i> Back
            </ion-nav-back-button>
            <h1 class="title"></h1>
            <div class="buttons pull-right">
                <button class="ion-search button icon button-clear" ng-click="openModal()"></button>
                <button class="ion-plus-circled button icon button-clear" ng-click="openModal()"></button>
            </div>
        </ion-nav-bar>

        <ion-tabs class="tabs-super-top tabs-top tabs-icon-left tabs-striped">

            <ion-tab title="More" icon="icon ion-navicon" ng-click="openSideMenu()" >
                <!-- <ion-nav-view name="tab-more" class="slide-left-right"></ion-nav-view> -->
            </ion-tab>

            <ion-tab title="Events" icon="icon ion-calendar" ui-sref="tab.events">
                <ion-nav-view name="tab-events" class="slide-left-right"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Involved" icon="icon ion-checkmark-round" ui-sref="tab.involved">
                <ion-nav-view name="tab-involved" class="slide-left-right"></ion-nav-view>
            </ion-tab>

            <ion-tab title="Networks" icon="icon ion-network" ui-sref="tab.networks">
                <ion-nav-view name="tab-networks" class="slide-left-right"></ion-nav-view>
            </ion-tab>

        </ion-tabs>


    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
        <ion-list>
            <ion-item nav-clear menu-close ng-click="login()">Login</ion-item>
            <ion-item nav-clear menu-close href="#/app/search">Search</ion-item>
            <ion-item nav-clear menu-close href="#/app/browse">Browse</ion-item>
            <ion-item nav-clear menu-close href="#/app/playlists">Playlists</ion-item>
        </ion-list>
    </ion-side-menu>

    <!-- Right menu -->
    <ion-side-menu side="right"></ion-side-menu>

</ion-side-menus>

Answer 2

好的，我让切换开始工作。

首先，我为sidemenus添加了一个显式控制器，如下所示：

<ion-side-menus delegate-handle="sideMenu" ng-controller="SideMenuController">

然后在controllers.js中：

.controller('SideMenuController', function($scope, $ionicSideMenuDelegate) 
{
    $scope.openSideMenu = function()
    {
        $ionicSideMenuDelegate.$getByHandle('sideMenu').toggleLeft();
    };
})

摆脱了sideMenuService。

检查文档here。

Answer 3

您将false传递给.toggleLeft，明确告诉它不要打开...

所以只需将其更改为.toggleLeft()

即可

从标签按钮打开侧边菜单

3 个答案: