AngularJS ng-cloak不能防止Mean.js中的代码闪烁

Question

这与MEAN.js环境有关。我在我的角度视图中有if语句来检查我的数据库中是否有任何结果。如果有结果，我会显示它们，如果没有，我会显示一条错误消息。

我有一个角度代码闪烁的问题:当页面加载时，我会在瞬间看到错误消息，然后它会立即显示我的数据库中的结果。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;"，但这会隐藏错误消息，即使它应该显示出来。

Answer 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>

Answer 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);
});

状态通常是..。

1. Loading...
2. Success！或者错误！

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