0

我想根据用户是否经过身份验证在我的 HTML 中显示/隐藏元素。我的 HTML 是静态的，GET /check当有一个名为session. 以下作品：

HTML：

<div class="ng-cloak" ng-show="loggedIn()">Foo</div>
<div class="ng-cloak" ng-hide="loggedIn()">Bar</div>

咖啡脚本：

angular.module('app', ['ngCookies']).run ($cookies, $http, $rootScope) ->
    if $cookies.session
        $http.get('/check').success (data) -> $rootScope.user = data

    $rootScope.loggedIn = ->
        if $rootScope.user then true else false

问题是，当用户通过身份验证时（user不为空，因此loggedIn()为真），仍有一小段时间 Bar 仍然显示，因为脚本仍在等待GET /check返回（因此user仍然为空，因此loggedIn()为假）。我该如何解决？

更新：小提琴： http: //jsfiddle.net/dexrN/1/（删除$cookies并替换$http为$timeout）

4

2 回答 2

1

由于您需要三种状态（不是两种），因此使用ng-switch（而不是 ng-hide/ng-show）来切换三种状态：未知、已登录、未登录。您可能需要使用另一个 $scope 属性这。

于 2013-02-04T16:59:43.680 回答
0

@mark-rajcok 是正确的，但对我来说太冗长了。这是我最终使用的解决方案，主要介绍loggedOut()：

<div class="ng-cloak" ng-show="loggedIn()">Foo</div>
<div class="ng-cloak" ng-show="loggedOut()">Bar</div>

咖啡脚本：

angular.module('app', ['ngCookies']).run ($cookies, $http, $rootScope) ->
    if $cookies.session
        $http.get('/check')
            .success (data) ->
                $rootScope.user = data
            .error -> 
                $rootScope.user = {}
                delete $cookies.session
    else
        $rootScope.user = {}

    $rootScope.loggedIn = -> $rootScope.user and $rootScope.user.username
    $rootScope.loggedOut = -> $rootScope.user and not $rootScope.user.username
于 2013-02-06T15:50:49.573 回答