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

Posted 2023-03-03

【中文标题】AngularJS ng-cloak 不会阻止 Mean.js 中的代码闪烁

【英文标题】：AngularJS ng-cloak does not prevent code blinking in Mean.js

【发布时间】：2015-07-07 20:55:32

【问题描述】：

这涉及 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;"，但这会隐藏错误消息，即使它应该显示。

【问题讨论】：

我发现使用 ng-bind 和 ng-bind-html 更容易。

看起来问题是 personCtrl.person.length 在 Persons.get 承诺完成之前的一瞬间实际上是假的。使用 ng-cloak 不会解决这个问题。在获取之前，您最初可以将 personCtrl.person.length 设置为 false。

@ribsies：ng-cloak 还可以在 ng-if 之类的东西评估之前阻止页面显示。这就是为什么我试图获取所有信息以做出明智的回应。

ng-cloak 防止输出 raw 表达式。它无法阻止显示您的错误 ng-if 声明；如果是这样，它怎么知道什么时候显示它是正确的，什么时候显示它是不正确的？在您的代码中，表达式已评估，它只是没有评估为您预期的结果。 ng-cloak 不与 promises 或 $http / $resource 交互以确定结果可能会在以后发生变化......

这里的问题是你正在返回一个承诺，而你没有在你的代码中考虑这个事实。

【参考方案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 来平滑动画体验。 使用指令分解上述代码并使其可重用。