如何在成功登录离子后隐藏登录按钮?

时间:2015-03-09 14:39:11

标签: angularjs cordova angular-ui-router ionic-framework ionic

我已经启动了sideMenu app in ionic并尝试了一些实现。最初,ionicModal用于显示登录,因此我使用像<; p>这样的离子列表项来更改它

<ion-side-menu side="left" >
    <ion-header-bar class="bar-stable  bar-dark">
      <a ng-click="redirectToWeb()" > <h1 class="title">NerdApp</h1></a>
    </ion-header-bar>
    <ion-content >
      <ion-list  class="BGcolorDG">
        <ion-item nav-clear menu-close class="BGcolorDG item item-icon-left item-content-modified" href="#/app/login" ng-show="control.showLogin" > <!--ng-click="login()" -->
          <i class="icon ion-locked"></i> <span>Login</span>
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/search" class="item item-icon-left BGcolorDG item-content-modified">
            <i class="icon ion-search"></i><span>Search</span>
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/browse" class="item item-icon-left BGcolorDG item-content-modified">
            <i class="icon ion-ios-browsers"></i><span>Browse</span>
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/playlists" class="item item-icon-left BGcolorDG item-content-modified">
            <i class="icon ion-music-note"></i> <span>Playlists</span>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>

并将routeState提供为

state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/menu.html",
  controller: 'AppCtrl'
})
.state('app.login', {
      url: "/login",
      views: {
          'menuContent': {
              templateUrl: "templates/login.html",
              controller: "LoginCtrl"
          }
      }
  })
.state('app.home', {
      url: "/home",
      views: {
          'menuContent': {
              templateUrl: "templates/home.html",
              controller: "HomeCtrl"
          }
      }
})

到家庭控制器的默认路由。

 $urlRouterProvider.otherwise('/app/home');

app控制器为

.controller('AppCtrl', function($scope,$timeout,$location,$rootScope) {
         $scope.control = {
            showLogin:true
        };

        if($rootScope.showLogin != undefined && $rootScope.showLogin == false){
            $scope.control.showLogin = false;
        }           
})

在loginControl内部我正在检查并将其重定向回到家庭控制器

$scope.login = function() {
            if ($scope.loginData.username == 'hassaan' && $scope.loginData.password == 'khan') {
                $rootScope.showLogin = false;
              //  $location.path('#/app');
                $state.go('app.home');
            }else{
            alert('Incorrect credentials');
            }
        }

我已经尝试了$ location.path和$ state.go,它正在做的是重定向到主页但是没有显示侧面菜单&#39;当我在浏览器中检查它显示隐藏的侧面菜单。

测试应用程序的流程图像为

Initial View

Side Menu Showing Login After login sidemenu hiding

2 个答案:

答案 0 :(得分:1)

尝试使用$ rootScope 将它传递给AppCtrl

.controller('AppCtrl', function (...., $rootScope) {
        // and then 
        $rootScope.control = {
            showProfile: false
        };

成功验证后 - 将其设为真实

$rootScope.control = {
    showProfile: true
}; 

现在它应该按预期工作

答案 1 :(得分:0)

如果你不需要,请不要使用$ rootscop 您可以使用参数从角度发送变量到其他控制器。

.state('menu.employeeInfo', {
      url: '/employeeInfo',
      views: {
          'side-menu21': {
              templateUrl: 'templates/employeeInfo.html',
              controller: 'employeeInfoCtrl'              
          }
      },
      params: {
          appointmentObj: null,
          subassignmentObj: null
      }
  })

然后您可以通过以下方式传递这些变量。

$scope.gotoAppointment = function (Appointment, Subassignment) {
            $state.go('menu.employeeInfo', { appointmentObj: Appointment, subassignmentObj: Subassignment }, { reload: true });
        }
相关问题