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

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 在初始页面上不工作

ng-show not working on initial page

html

javascript

angularjs

angular-local-storage