如何在Ionic登录时加载菜单?

时间:2017-01-20 04:35:58

标签: angularjs ionic-framework

我遇到了一个问题,我想添加一个条件,我需要隐藏菜单中的一些按钮,具体取决于登录的用户。这很容易只是一个简单的if-else语句。我的问题是首先加载菜单。我想在登录后加载菜单。我该怎么办?
这是我的代码:

Code inside controller of my menu.
if (Apprsal.userSelectedData().usertype == undefined || Apprsal.userSelectedData().usertype == '')
{
    $scope.nseMenu = true;  //this is just an ng-hide in my menu
    $scope.vaMenu = false;  //this is just an ng-hide in my menu
}
else
{
    $scope.nseMenu = false;
    $scope.vaMenu = true;
}


Code of my config inside app.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider

.state('app.home', {
        cache: false,
        url: '/home',
        views: {
            'menuContent': {
                templateUrl: 'templates/home.html',
                controller: 'HomeCtrl'
            }
        }
    })

.state('app', {
    url: '/app',
    abstract: true,
    cache: false,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
})
$urlRouterProvider.otherwise('/app/home');
});

编辑:

Code for my menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
    <ion-nav-bar class="bar-stable">

        <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">
    <ion-header-bar class="bar-stable">
        <h1 class="title"></h1>
    </ion-header-bar>

    <ion-content>
        <div class="item-input-inset search-bar">
        <div class="item-input-wrapper white">
            <input id="searchKey" type="search" placeholder="Search" ng-model="data.searchKey" autocorrect="off" />


            <button class="button button-clear" ng-click="search(data.searchKey)"><i class="ion-ios7-search ion-search"></i></button>

        </div>

    </div>
        <ion-list>
            <ion-item menu-close href="#/app/home">
                Home
            </ion-item>

            <ion-item menu-close href="#/app/testprofile" ng-hide="vaMenu">
                My Profile
            </ion-item>
            <!-- For NSE only -->
            <a href="#/app/profiles" id="btnProfiles" ng-hide="nseMenu">
            <ion-item menu-close>
                Profiles
            </ion-item>
            </a>
             <!-- end -->
             <!-- For Phase 2
            <ion-item menu-close href="#/app/notify">
                Notifications
            </ion-item>
            -->
            <a href="#">
            <ion-item menu-close ng-click="btnLogout()">
                Logout
            </ion-item>
            </a>
        </ion-list>
    </ion-content>
</ion-side-menu>

2 个答案:

答案 0 :(得分:0)

对不起我也是Ionic的新手,但我已经实现了登录。在我的情况下,我也将抽象视图设置为菜单,但将后备视图作为新的登录页面。在那个页面上我禁用了侧边菜单。所以我建议您可以通过以下方式处理它。

首先制作单独的登录视图。

禁用该视图的侧边菜单。 成功登录后,移动到主页,然后根据用户的权限覆盖范围数组,该数组负责在侧边菜单中显示列表。因此,您可以限制特定用户组的某些功能。 谢谢!

答案 1 :(得分:0)

您必须在控制器之间使用事件消息传递。 (即)。,您可以创建自定义事件&amp;将事件对象从一个控制器传递到另一个这是角度,通过$ scope。$ on,$ scope。$ broadcast()&amp; $范围。$发射()。 您可以浏览此documentation的最后几节来实现此目的。这是另一个article,它可以帮助你做同样的事情。