内容短暂呈现然后使用 ng-if 消失 [英] Content briefly rendering then disappearing using ng-if

问题描述

我的页面上有一些内容被包裹在一个 ng-if 中，如下所示:

 
<p><强>显示给用户的消息</p>

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

function MyController($scope, $q, notifyHelper) {openAjaxLoaderGif();$scope.ShowMessgae = false;MyService.getVarsFromSession().then(function (result) {//为简洁起见删除了一些代码如果(一些条件){$scope.ShowMessgae = true;}}，函数(数据，失败原因，标题){notifyHelper.error("发生错误 - 再试一次");})}).finally(函数(){closeAjaxLoaderGif();});};

我将 ShowMessage 的值设置为 false，只有在满足特定条件时才为 true.在大多数情况下 ShowMessage 将为假.但是，这会导致页面加载时，显示给用户的标记消息会短暂呈现然后消失(以显示我的期望) - 是不是我做错了什么导致了这种闪烁?

解决方案

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

为了在 angular 准备好说"ShowMessgae 是 true 还是 false 之前根本不显示内容，您应该使用ng-cloak.这样，直到 AngularJS知道"ShowMessgae 的值时，内容才会显示.然后，此时，框架已准备好显示(或不)内容，具体取决于 ShowMessgae

的值

<p><强>显示给用户的消息</p>

I have some content on my page which is wrapped in an ng-if like below:

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

Then in my angular js controller I have the following:

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

I am setting the value of ShowMessage to false and it only is true if a certain condition is met. In the majority of instances ShowMessage will be false. However this results in when the page loads the markup Message displayed to User briefly renders and then it disappears (to show what I expect) - is there something I am doing wrong which is causing this flicker?

解决方案

This happens because the content is rendered until AngularJS detects that ShowMessgae is false and then hides it.

In order to not show the content at all until angular is ready to "say" whether ShowMessgae is true or false you should use ng-cloak. This way the content is not shown until AngularJS "knows" the value of ShowMessgae. Then, at this point, the framework is ready to show (or not) the content, depending on the value of ShowMessgae

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

这篇关于内容短暂呈现然后使用 ng-if 消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！