AngularJS ng-cloak不会阻止Mean.js中的代码闪烁

Question

这涉及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-cloakCSS类,但它们不起作用.我可以添加style="display:none;"但隐藏错误消息,即使它应该显示.

Answer 1

您的问题不在于 ng-cloak，而在于服务器的延迟。

解决方案是使用指令内的 jQuery（推荐）或控制器内的 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);
});

各州通常...

1. 加载中...
2. 成功！或错误！

使用 jquery 和 css 来平滑动画体验。使用指令分解上述代码并使其可重用。