Question

我目前正在使用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的内容）时，内容也会消失。

提前感谢您的任何想法。

app.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')
});

index.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>

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>
</ion-view>

Answer 1

在ng-show中，请改为：ng-show="(isLogged !== 'true');"

Answer 2

尝试更新以下代码（省略isLogged变量周围的boolean标记。您希望他们将变量视为strings而不是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); }

Answer 3

好的我找到了解决方案，

我第一次尝试为主视图创建一个控制器时，我创建了一个函数来初始化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');
  }
}]);

谢谢大家的帮助。

ng-show不在初始页面上工作

3 个答案: