ng-show ng-hide：什么才是真实值？

Question

我正在构建一个 Angular 应用程序并使用 cookie 设置值，以便在页面刷新发生时持久性应该存在，即如果我已登录，我应该看到配置文件和注销页面，如果我没有登录，我应该请参阅注册/登录页面。 这是代码。

app.controller("NavCntrl", function($scope, $http, $rootScope, $location, $cookies)
{
    $scope.logout = function()
    {
        console.log("Logout");
        //$rootScope.currentUser=undefined;
        $cookies.put('loggedIn', "");
        //$location.url('/home');
    }
 $scope.loggedIn = $cookies.get('loggedIn');
 if($scope.loggedIn == "true")
 {
    $scope.loggedOut = "";
 }
 else
 {
    $scope.loggedOut = "true";
 }
}); 

html 看起来如下

<nav ng-controller ="NavCntrl" class="navbar navbar-default" >
<div >
    <a href="/home" class="navbar-brand" >Home</a>
    <span ng-show = "loggedOut">
        <a href="/login" class="navbar-brand" >Login</a> 
        <a href="/register" class="navbar-brand">Register</a>  
    </span> 
    <span ng-show = "loggedIn">
        <a href="/logout" ng-click=logout() class="navbar-brand">Logout</a> 
        <a href="/profile" class="navbar-brand">Profile</a>
    </span>
</div> 
</nav>

现在每当我登录时，我都会设置这个$cookies.put("loggedIn", true);

我在调试 Angular 时看到的行为是，有时被评估的值是正确的，但 HTML 没有得到如下更新。 我在考虑我对真实表达的理解是错误的。 什么使表达式被设置为真？ 正如我在示例中看到的，有些人只是将其等同于空白字符串以认为它是假的，或者有时他们给出布尔值？ 如何纠正我的应用程序的行为？。

Answer 1

来自评论：在 js 中符合条件的相同表达式在 angularJS 中符合条件。请记住：AngularJS 表达式只是 Javascript 表达式。

此外，您似乎将布尔值作为字符串放置。你为什么不使用真/假呢？像这样的：

app.controller("NavCntrl", function($scope, $http, $rootScope, $location, $cookies)
{
    $scope.logout = function()
    {
        console.log("Logout");
        //$rootScope.currentUser=undefined;
        $cookies.put('loggedIn', false);
        //$location.url('/home');
    }
    $scope.loggedIn = $cookies.get('loggedIn');
    if($scope.loggedIn)
    {
        $scope.loggedOut = false;
    }
    else
    {
        $scope.loggedOut = true;
    }
}); 

Answer 2

问题在于你的逻辑一开始。如果你想坚持 cookie 的想法，我会做这样的事情......

app.controller("NavCntrl", function($scope, $http, $rootScope, $location, $cookies)
{
    $scope.loggedIn = $cookies.get('loggedIn');

    $scope.logout = function()
    {
        console.log("Logout");
        $cookies.put('loggedIn', 'false');
        $scope.loggedIn = $cookies.get('loggedIn');
    };

    $scope.login = function()
    {
        console.log("Login");
        $cookies.put('loggedIn', 'true');
        $scope.loggedIn = $cookies.get('loggedIn');
    };

}); 

然后在你的 html 中使用这个逻辑...

<nav ng-controller ="NavCntrl" class="navbar navbar-default" >
<div >
    <a href="/home" class="navbar-brand" >Home</a>
    <span ng-show = "loggedIn == 'false'">
        <a href="/login" ng-click=login() class="navbar-brand" >Login</a> 
        <a href="/register" class="navbar-brand">Register</a>  
    </span> 
    <span ng-show = "loggedIn == 'true'">
        <a href="/logout" ng-click=logout() class="navbar-brand">Logout</a> 
        <a href="/profile" class="navbar-brand">Profile</a>
    </span>
</div> 
</nav>

Answer 3

您正在为"true" 使用字符串值，这与使用boolean 值true 不同