Question

我有一个侧边菜单，其中有一个重定向到登录页面的登录列表，在用户登录成功之后，我希望登录到diappear，而登录我想要显示注销和其他用户功能。我尝试使用ng-hide但是没有工作

我希望登录后结果如下所示。我在登录功能中将false值分配给ng-hide，但值已更改但似乎确实更改了视图。

我希望结果如下： -

的index.html

<body ng-app="starter" ng-controller="loginCtrl">
<ion-side-menus enable-menu-with-back-views="true">
    <ion-side-menu side="left">
            <div class="list card">
                <div class="item item-image">
                    <img ng-src="img/sideImage.png">
                </div>
            </div>
            <ion-list>
                <ion-item menu-close ui-sref="mainlist" ui-sref-active="active">
                    Home 
                </ion-item>
                <ion-item menu-close ui-sref="login" ng-hide="menuItem" ui-sref-active="active">
                    Login
                </ion-item>
                <ion-item menu-close ui-sref="mainlist" ng-hide="!menuItem" ui-sref-active="active" ng-click="logOut()">
                    Log Out
                </ion-item>
                <ion-item menu-close ui-sref="userpage" ng-hide="!menuItem" ui-sref-active="active">
                    MyBlog
                </ion-item>
                <ion-item menu-close ui-sref-active="active" ui-sref="about">
                    About
                </ion-item>
                <ion-item menu-close ui-sref-active="active" ui-sref="postblog">
                    Post blog <! -- delete this -->
                </ion-item>
            </ion-list> 
        </ion-side-menu>

        <ion-side-menu-content>
        <!-- Main content, usually <ion-nav-view> -->
            <ion-nav-bar class="bar-positive">
                  <ion-nav-buttons side="left">
                   <!-- Toggle left side menu -->
                   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
                  </ion-nav-buttons>
                </ion-nav-bar>
            <ion-nav-view></ion-nav-view>
    </ion-side-menu-content>
</ion-side-menus>

app.js

blog.config(function($stateProvider,$urlRouterProvider){
    $stateProvider        
        .state('login',{
        url:'/login',
        templateUrl:'templates/login.html',
        controller:'loginCtrl'
    })

Controller.js（不是所有代码）

blog.controller('loginCtrl',function($scope,$state,$firebaseAuth,$cordovaToast)
            {
                    $scope.menuItem = false;
                    var fbAuth= $firebaseAuth(fb);
                    $scope.data={};

                    //login Code
                    $scope.login=function(username,password){
                             var username = $scope.data.username;
                             var password = $scope.data.password;
                             if(username && password !=null)
                                {
                                    fbAuth.$authWithPassword({email:username,password:password})
                                    .then(function (authData)
                                          {  
                                        $scope.menuItem = true;
                                        console.log($scope.menuItem);
                                          $state.go('userpage');
                                           // $cordovaToast.showShortBottom("Login Successful");
                                            console.log("loged in" +authData.uid);
                                            uid =authData.uid;
                                            console.log(uid);


                                          })
                                    .catch(function (error)
                                           {
                                          //  $cordovaToast.showShortBottom("Login Fail");
                                            console.log("oops something went wrong"+error);  
                                        })
                                }
                             else
                                {
                                  //  $cordovaToast.showShortBottom("enter username & password");
                                    console.log("must enter username and password"); 
                                }
                    }

menuItem ng-hide布尔值。我在模板页面index.html和login.html中使用loginCtrl作为同一个控制器，这样我就不必传递值。

编辑：侧边菜单中的登录名重定向到此页面：

此处的登录按钮调用控制器内的登录功能。

ps：我只是一个初学者，我知道风格和设计模式很糟糕，我应该使用服务或工厂。

Answer 1

使用$ rootScope varaible ex：$ rootScope.menuitem而不是$ scope.menuitem

Answer 2

尝试使用ng-if

$scope.menuItem = false;

你看到条件为false会使该区域消失，当它成为真时它会出现在上面的代码中

<ion-item menu-close ui-sref="login" ng-hide="menuItem" ui-sref-active="active" ng-if="$scope.menuItem = false;">
   Login
</ion-item>
<ion-item menu-close ui-sref="mainlist" ng-hide="!menuItem" ui-sref-active="active" ng-click="logOut()" ngif="$scope.menuItem = true;">
   Log Out
</ion-item>

Ionic Framework SideMenu使用ng-hide删除项目不起作用？

2 个答案: