Question

我正在构建一个角度应用程序并使用cookie来设置值，这样当页面刷新时就会出现持久性，即如果我已登录，我应该看到Profile and Logout页面，如果我没有登录，我应该请参阅注册/登录页面。这是代码。

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没有按如下方式更新。我在考虑我对truthy表达的理解是错误的。 将表达式设置为true的条件是什么？正如我在示例中看到的，有些人将它等同于空字符串以将其视为假，或者有时它们给出布尔值？ 如何更正应用程序的行为？。

Answer 1

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

此外，看起来您将布尔值作为字符串放置。为什么不使用true / false？像这样：

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

的字符串值不同

ng-show ng-hide：什么符合truthy价值？

3 个答案: