隐藏基于用户登录的菜单，以角度js注销

时间：2016-02-22 06:27:57

标签： javascript jquery angularjs

我有离子应用程序，侧面菜单有家，登录，仪表板，注销（项目）。

我正在使用服务器api登录用户，我希望在使用时登录侧面菜单项登录不在那里和仪表板，注销要添加，同样当用户注销时他可以看到登录而不是注销和会计菜单

以下是我的代码：

http://codepen.io/gauravcoder/pen/bEjGNa

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic page</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//fabricjs.com/lib/fabric_with_gestures.js"></script>
  
  
   
</head>

<body ng-controller="HomeTabCtrl">


<ion-side-menus>
  <ion-side-menu-content>
  <ion-nav-view animation="slide-left-right"> </ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="right">
   <div class="list">
   <a class="item item-icon-left" href="#"><i class="icon ion-email"></i> Check mail</a>
   <a class="item item-icon-left" href="#login" ng-hide="show_menu" > <i class="icon ion-chatbubble-working" ></i>Login</a> 
    <a class="item item-icon-left" href="#account" ng-hide="show_menu"> <i class="icon ion-mic-a"></i> Account</a> 

   <a class="item item-icon-left" href="#" ng-hide="show_menu"> <i class="icon ion-mic-a"></i> Logout</a> 
   </div>
  </ion-side-menu>
</ion-side-menus>  


<script id="templates/tabs.html" type="text/ng-template">
      <ion-tabs class="tabs-striped tabs-positive tabs-top tabs-top-my tabs-icon-only" animation="fade-in-out">

        <ion-tab title="tab1" icon="ion-home" href="#/tab/tab1">
          <ion-nav-view name="tab1-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="tab2" icon="ion-home" href="#/tab/tab2">
          <ion-nav-view name="tab2-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="tab3" icon="ion-home" ui-sref="tabs.tab3">
          <ion-nav-view name="tab3-tab"></ion-nav-view>
        </ion-tab>
		<ion-tab title="tab4" icon="ion-home" ui-sref="tabs.tab4">
          <ion-nav-view name="tab4-tab"></ion-nav-view>
        </ion-tab>
		<ion-tab title="tab5" icon="ion-home" ui-sref="tabs.tab5">
          <ion-nav-view name="tab5-tab"></ion-nav-view>
        </ion-tab>
		<ion-tab title="tab6" icon="ion-android-apps" ng-click="toggleRightSideMenu()"  ui-sref="tabs.tab6">
       		<ion-nav-view name="tab6-tab"></ion-nav-view>

        </ion-tab>

      </ion-tabs>
  <ion-footer-bar  class="bar-footer btn-footer bar-light">
  <div class="row">
    <div class="col">
      <button class="button  button-block button-positive" ng-click='next()'> View cart Page </button>
    </div>
    <div class="col">
      <button class="button  button-block button-calm"> View checkout page </button>
    </div>
  </div>
</ion-footer-bar>
    </script> 
<script id="templates/tab1.html" type="text/ng-template">
      <ion-view view-title="tab1">
		<div class="my-content-tabs scroll-content ionic-scroll  has-header has-footer has-tabs-mytop">
			<div class="row p0">
		
	
			</div>
		</div>

      </ion-view>
</script> 
  
  
  
  
  
  
<script id="templates/login.html" type="text/ng-template">
 user name is {{user.name}}
</script>  
  
  
 <script id="templates/login.html" type="text/ng-template">
   
   <ion-view view-title="Buy Now" nav-bar-class="bar-balanced" cache-view="false">
    <ion-header-bar class="bar-positive" align-title="center">
      <button class="button button-clear button-light" ui-sref='tabs.tab1'><i class="ion-chevron-left"></i></button>
      <h1 class="title">Login</h1>
    </ion-header-bar>
	</ion-nav-bar>
	<ion-content class="padding">

	<div class="list">
<form method="post" action="" id="form-id">

	  <label class="item item-input">
		<input type="text" placeholder="Username" id="username">
	  </label>
	  <label class="item item-input">
		<input type="password" placeholder="Password" id="password">
	  </label>
</form>

	  
	</div>
	
	<div class="row">
		<button class="button button-block button-positive" ng-click="signIn()">
		  Login
		</button>
	</div>


	</ion-content>
	

</ion-view>
  
  </script>
  
  
  
 
<script id="templates/nav-stack.html" type="text/ng-template">
      <ion-view view-title="Tab Nav Stack">
        <ion-content class="padding">
          <p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
        </ion-content>
      </ion-view>
    </script> 
  <script id="templates/next.html" type="text/ng-template">


    <ion-view view-title="View Cart" nav-bar-class="bar-balanced">
	<ion-nav-bar class="bar-positive" align-title="center">
		<ion-nav-back-button>
		</ion-nav-back-button>
	</ion-nav-bar>
	<ion-content class="padding">
	 
    clicked id :
	  <p>
		<a class="button icon ion-home" href="#/tab/home"> Home</a>
		<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
	  </p>
	</ion-content>
</ion-view>
    
</script> 
<script>
angular.module('ionicApp', ['ionic', 'ionicApp.controllers', 'ngAnimate']).config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.tab1', {
      url: "/tab1",
      views: {
        'tab1-tab': {
          templateUrl: "templates/tab1.html",
          controller: 'Tab1Ctrl'
        }
      }
    })
    .state('login', {
      url: "/login",
      templateUrl: "templates/login.html",
	  controller: "login"
    }).state('account', {
      url: "/account",
      templateUrl: "templates/account.html",
	  controller: "account"
    })
  .state('next', {
      url: "/next",
      templateUrl: "templates/next.html",
      controller: "NextController",
  params: {
			clickedid: null
		}
    })
   $urlRouterProvider.otherwise("/tab/tab1");

}).controller('account', function ($scope,$http,$ionicPopup) {

}).controller('login', function ($scope,$http,$ionicPopup) {

	$scope.signIn = function () {
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		$scope.show_menu = true;
		var alertPopup = $ionicPopup.alert({
		 title: 'sucess',
		 template: 'now logout and account should show'
	   });
	
	};
	
}).controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate, $state) {
$scope.show_menu = false;
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
  $scope.toggleRightSideMenu = function() {
	  console.log('rigth open')
    $ionicSideMenuDelegate.toggleRight();
  };
  console.log('HomeTabCtrl');
  $scope.next = function(){
    $state.transitionTo('next');   
  }
}).controller("NextController", function($scope){
    $scope.showAlert = function(){ alert("I'm a modal window!") }
});
</script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

我不确定您希望显示或隐藏哪些元素，但除非我不理解您，为什么不使用ng-hide或ng-show，如下所示：

<ion-side-menus ng-hide="!show_menu">
</ion-side-menus>

或

<ion-side-menus ng-show="show_menu">
</ion-side-menus>

https://docs.angularjs.org/api/ng/directive/ngHide

答案 1 :(得分：0)

我没有查看您的代码，但您可以创建一个脚本来检查用户是否已登录/注销，只是隐藏了登录或注销链接。

例如在CSS中创建一个类

.hidden{
    display: none;
}

然后创建一个脚本，检查用户是否已登录，如果他

则隐藏 
if (userLoggedIn){
   $(loginButton).addClass("hidden");
   $(logoutButton).removeClass("hidden");
}
else{
   $(logoutButton).addClass("hidden");
   $(loginButton).removeClass("hidden");
}

其中loginButton包含登录按钮的id，对于logoutButton也是如此。

你希望得到漂移。

答案 2 :(得分：0)

首先使用以下

更改html 
<a class="item item-icon-left" href="#login" ng-hide="show_menu" > <i class="icon ion-chatbubble-working" ></i>Login</a> 
<a class="item item-icon-left" href="#account" ng-show="show_menu"> <i class="icon ion-mic-a"></i> Account</a> 

<a class="item item-icon-left" href="#" ng-show="show_menu"> <i class="icon ion-mic-a"></i> Logout</a>

然后在login控制器中初始化show_menu变量，然后再定义signIn函数。喜欢

.controller('login', function ($scope,$http,$ionicPopup) {
    $scope.show_menu = false;
    $scope.signIn = function () {
       //your code
       $scope.show_menu = true;
       //your other code

    };

})

答案 3 :(得分：0)

这是你可以做的：

  1. 将此功能添加到您的js

    2. function toggleHide(){ var elements = document.getElementsByClassName("toggle-hide"); for(var i = 0; i < elements.length; i++){ elements[i].onclick = function(){ var containerid = this.getAttribute('data-hide-container'); document.getElementById(containerid).classList.toggle('ng-hide'); } } }

    我使用纯粹的js制作，所以不会有问题。

    1. 将此添加到您的css：

      2. .ng-hide{ display:none; }

      1. 你可以这样使用：

        2. <button class="toggle-hide" data-hide-container="searchMapContainer"></button>

        我创建了具有data-hide-container的函数作为要隐藏的元素的ID。如有必要，您可以将其更改为使用类。

        1. 在您想要使用的控制器内调用 toggleHide（）函数。

          2. 我希望它有所帮助。

相关问题
最新问题