javascript - AngularJS ng-cloak は Mean.js でコードの点滅を防げない

これはMEAN.js環境に関係しています。Angularのビューで、データベースから結果があるかどうかを確認するためのif文があります。結果があればそれを表示し、なければエラーメッセージを表示します。

Angularのコードで点滅する問題があります：ページが読み込まれると、一瞬だけエラーメッセージが表示され、その後すぐにデータベースの結果が表示されます。ng-cloakディレクティブは機能しません。

コード

以下に、私が何をしているのかを明確にするはずの非常に基本的なAngularコードを含めました。

コントローラー：

// Return a specific person from the database.
this.person = Persons.get({
    personId: $stateParams.personId
});

ビュー：

<div ng-if="personCtrl.person.length">
    <!-- Show person's details here... -->
</div>

<div ng-if="!personCtrl.person.length" ng-cloak>
    <p>Sorry, person could not be found.</p>
</div>

私は ng-cloak ディレクティブを追加しようとしましたが、機能しません。MEAN.js は Bootstrap も使用しており、いくつかの CSS クラスを提供していますが、どれを追加しても、どれも機能しません：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

要するに：ng-cloak ディレクティブと ng-cloak CSS クラスの両方を追加することはできますが、機能しません。style="display:none;" を追加することはできますが、それでは表示されるべきエラーメッセージまで隠れてしまいます。

回答 #1

これはもしかしてあなたが探しているものですか？

<div ng-show="personCtrl.person.length">
    <!-- Show person's details here... -->
</div>

<div ng-hide="personCtrl.person.length" ng-cloak>
    <p>Sorry, person could not be found.</p>
</div>

回答 #2

あなたの問題はng-cloakではなく、サーバーの遅延です。

解決策は、状態をディレクティブ内のjQueryで管理する（推奨）か、コントローラー内で管理するかです。

ここに私は非常に粗い形で原理を示しました http://plnkr.co/edit/sSVHl5AXkltjvBrpKR4s

app.controller('HomePage', function($scope, $timeout){
    $scope.user = false;
    var el = angular.element('#user-data-loading-zone');
    // modelling 1000ms latency from the server
    $timeout(function(){
        $scope.user = {name: 'John'};
        if($scope.user) {
            el.removeClass('loading');
            el.addClass('success');
            el.html('Success data was loaded => ' + $scope.user.name);
        } else {
            $scope.state = 'Error unable to load';
        }
    }, 1000);
});

その州は通常…

読み込み中...
成功！またはエラー！

アニメーションで体験をスムーズにするために、jqueryとcssを使用します。上記のコードを抽出して再利用可能にするためにディレクティブを使用します。