使用 ng-if 短暂呈现然后消失的内容

Question

我的页面上有一些内容包含在 ng-if 中，如下所示：

            <div ng-if="ShowMessgae" class="text-danger">
                <p>
                    <strong>
                        Message displayed to User
                    </strong>
                </p>
            </div>

然后在我的 Angular js 控制器中，我有以下内容：

function MyController($scope, $q, notifyHelper) {
    openAjaxLoaderGif();

    $scope.ShowMessgae = false;

    MyService.getVarsFromSession().then(function (result) {
       // some code removed for brevity
       if(some coditional) {
        $scope.ShowMessgae = true;
       }

        }, function (data, failReason, headers) {
            notifyHelper.error("Error has occurred - try again");
        })
    })
    .finally(function () {
        closeAjaxLoaderGif();
    });
};

我将 ShowMessage 的值设置为 false，并且仅在满足特定条件时才为 true。在大多数情况下，ShowMessage 将是错误的。但是，这会导致当页面加载显示给用户的标记消息时会短暂呈现，然后消失（以显示我的预期） - 是不是我做错了什么导致了这种闪烁？

Answer 1

发生这种情况是因为内容在 AngularJS 检测到 ShowMessgae 是 false 之前一直呈现，然后将其隐藏。

为了在 Angular 准备好“说出”ShowMessgae 是 true 还是 false 之前根本不显示内容，您应该使用 ng-cloak。这样，在 AngularJS“知道”ShowMessgae 的值之前，不会显示内容。然后，此时，框架已准备好显示（或不）内容，具体取决于ShowMessgae的值

<div ng-if="ShowMessgae" class="text-danger" ng-cloak>
    <p>
        <strong>
            Message displayed to User
        </strong>
    </p>
</div>

Answer 2

添加ng-cloak，如下所示

<div ng-if="ShowMessgae" class="text-danger" ng-cloak>
   <p>
     <strong>
         Message displayed to User
     </strong>
   </p>
 </div>