Javascript ng show ng hide:什么才是真正的价值?
我正在angular中构建一个应用程序,并使用Cookie设置值,这样当页面刷新时,持久性应该存在,即如果我登录,我应该看到配置文件和注销页面,如果我没有登录,我应该看到注册/登录页面。 这是代码Javascript ng show ng hide:什么才是真正的价值?,javascript,angularjs,cookies,Javascript,Angularjs,Cookies,我正在angular中构建一个应用程序,并使用Cookie设置值,这样当页面刷新时,持久性应该存在,即如果我登录,我应该看到配置文件和注销页面,如果我没有登录,我应该看到注册/登录页面。 这是代码 app.controller("NavCntrl", function($scope, $http, $rootScope, $location, $cookies) { $scope.logout = function() { console.log("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没有得到如下更新。
我认为我对真理表达的理解是错误的什么使表达式有资格被设置为真?正如我在示例中看到的,有些人只是将它等同于空白字符串来认为它为假,或者有时他们给出布尔值如何更正应用程序的行为?来自注释:在js中符合true的表达式在angularJS中符合true。记住: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;
}
});
您正在使用字符串值来表示“true”
,这与使用布尔值true
不同,问题在于您的逻辑。如果你想坚持饼干的想法,我会这样做
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>
在js中符合true的表达式在angularJS中也符合true。记住:AngularJS表达式只是Javascript表达式。这回答了你的问题吗?对于$scope.loggedOut=“”
。为什么它符合ng show的虚假条件?当您将一个设置为true
而另一个设置为”
时,因为在javascript中==false//这是真的,我应用了修复程序。它仍然不起作用。我的意思是ng秀无法更新它。即使在登录后,我也会看到登录/注册屏幕。还有什么问题?请用引号将函数括起来以确保:
现在,我看不到cookie loggedIn的设置位置。介意解释一下吗?但OP正在生成一个计算结果为布尔值的表达式,不管怎样,我注意到了另一件事。我包含的html文件是我的index.html。无论我在哪里给出$location.url('/home')
。因此,登录后,它会重定向到主页。所以如果登录后我的地址栏显示<代码>http://localhost:8082/home
然后点击“刷新”按钮,得到正确的值。i、 e如果我已登录,我将进入注销/个人资料页面,或者如果我已注销,则进入登录/注册页面。长话短说,为了显示这些更改,需要对整个页面进行刷新。为什么呢?如果你不明白,请告诉我。我会试着用更好的方式解释它,而不去看你是如何把你的应用程序组装起来的,可能有一百万件事情出错了,所以很难猜测。也就是说,您可以尝试将loggedIn变量的$scope替换为$rootScope,以使其可供所有控制器使用。