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

州通常是......

加载...
成功！或错误！

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

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

代码

2 个答案: