0

我目前正在使用 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>
4

3 回答 3

0

在您的ng-show时候,请改为:ng-show="(isLogged !== 'true');"

于 2017-01-25T16:02:41.993 回答
0

尝试更新到以下代码(省略变量''周围的标记isLogged。您希望他们将变量视为booleanstrings

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);
}
于 2017-01-25T16:03:16.113 回答
0

好的,我找到了解决方案,

第一次尝试为主视图创建控制器时,我创建了一个函数来初始化 rootScope 变量 isLogged 并将该函数作为 home.html 的开头调用,

我现在又试了一次,但没有这个功能,它似乎正在工作。

这是 homeController.js:

app.controller('homeController', ['$rootScope',
function($rootScope){
  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');
  }
}]);

谢谢大家的帮助。

于 2017-01-25T22:02:40.257 回答