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

问题描述

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

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>

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

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

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

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?

推荐答案

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

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

为了完全不显示内容，直到Angle准备说出" ShowMessgae是true还是false时，您应该使用ng-cloak.这样，直到AngularJS知道" ShowMessgae的值，内容才显示出来.然后，此时，框架便可以根据ShowMessgae

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屋！