0

ユーザーが認証されているかどうかに応じて、HTML の要素を表示/非表示にしたい。私の HTML は静的です。チェックは Ajax によって行われ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

問題は、ユーザーが認証されたとき ( usernull ではないためloggedIn()true である)、バーがまだ表示される短い期間があることです。これは、スクリプトがまだGET /check返されるのを待っているためuserです (したがって、まだ nullであり、 loggedIn()false です)。これを修正するにはどうすればよいですか?

更新:フィドル: http://jsfiddle.net/dexrN/1/ (削除され$cookies、に置き換えられ$httpました$timeout)

4

2 に答える 2

1

3 つの状態 (2 つではなく) が必要なため、ng-switch (ng-hide/ng-show の代わりに) を使用して、不明、ログイン済み、未ログインの 3 つの状態を切り替えます。別の $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 に答える