我目前正在使用 Ionic - angularJS 开发应用程序
为了在主页中显示内容,我使用指令 ng-show='isLogged',此条件必须为 false 才能显示内容。
这是页面 home.html 的代码:
<ion-view view-title="Home" ng-app='starter'>
<ion-content class='padding' ng-show="!isLogged">
<div class="global-speach">
<p>You are not logged in, to continue further, please log in</p>
<a ui-sref="logIn"><button class='button button-full button-dark'> Log In </button></a>
</div>
<br>
<div class="global-speach">
<p>Or you can create an account by clicking on the button below</p>
<a ui-sref="signUp"><button class='button button-full button-dark'>Create an account </button></a>
</div>
</ion-content>
该参数isLogged
在用户打开应用程序时定义
if (window.localStorage.getItem('isLogged') == 'true')
{
$rootScope.isLogged = true;
window.localStorage.setItem('isLogged', 'true');
}
else {
$rootScope.isLogged = false;
window.localStorage.clear();
window.localStorage.setItem('isLogged', 'false');
}
我的问题是,当我打开应用程序并且变量$rootScope.isLogged
为真时,内容仍然显示
我在应用程序中有一个侧边菜单,我不知道为什么,但是当我单击打开侧边菜单时,内容在开始时按预期消失。为了测试项目的另一部分,我在应用程序的菜单栏中添加了一个按钮,当我单击此按钮(用于在控制台中显示 localStorage 的内容)时,内容也会消失。
提前感谢您的任何想法。
应用程序.js:
var app = angular.module('starter', ['ionic', 'ngCordova'])
app.run(function($ionicPlatform, $rootScope)
{
$ionicPlatform.ready(
function()
{
if(window.cordova && window.cordova.plugins.Keyboard)
{
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
if (window.localStorage.getItem('isLogged') == 'true')
{
$rootScope.isLogged = true;
window.localStorage.setItem('isLogged', 'true');
}
else {
$rootScope.isLogged = false;
window.localStorage.clear();
window.localStorage.setItem('isLogged', 'false');
}
});
$rootScope.serverUrl = '';
})
app.config(function($stateProvider, $urlRouterProvider){
// Home view
$stateProvider.state('home', {
url: '/home',
templateUrl: 'templates/home.html'
})
// Login view
$stateProvider.state('logIn', {
url: '/logIn',
templateUrl: 'templates/logIn.html',
controller: 'connectionController'
})
// Sign up view
$stateProvider.state('signUp', {
url: '/signUp',
templateUrl: 'templates/signUp.html',
controller: 'connectionController'
})
$urlRouterProvider.otherwise('/home')
});
索引.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Project</title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!-- Models -->
<script type="text/javascript" src="js/Models/sha512.js"></script>
<!-- jquery -->
<script type="text/javascript" src='js/jquery-1.7.1.min.js'></script>
<!-- controllers -->
<script type="text/javascript" src="js/controllers/connectionController.js"></script>
</head>
<body ng-app="starter">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class='bar-stable'>
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side='left'>
<button class='button button-icon button-clear ion-navicon' menu-toggle='left'></button>
</ion-nav-buttons>
<ion-nav-buttons side='right'>
<button ng-show='isLogged' class='button' ng-controller='connectionController' ng-click='disconnect()'>Log Out</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side='left'>
<ion-item menu-close ui-sref='home'>Home</ion-item>
<ion-item menu-close ui-sref='logIn' ng-show='!isLogged'>Log In</ion-item>
<ion-item menu-close ui-sref='signUp' ng-show='!isLogged'>Sign Up</ion-item>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
主页.html:
<ion-view view-title="Home" ng-app='starter'>
<ion-content class='padding' ng-show="!isLogged">
<div class="global-speach">
<p>You are not logged in, to continue further, please log in</p>
<a ui-sref="logIn"><button class='button button-full button-dark'> Log In </button></a>
</div>
<br>
<div class="global-speach">
<p>Or you can create an account by clicking on the button below</p>
<a ui-sref="signUp"><button class='button button-full button-dark'>Create an account </button></a>
</div>
</ion-content>
</ion-view>