Content briefly rendering then disappearing using ng-if

Question

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?

Answer 1

This is because the content is rendered untils angular 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 angular "knows" the value of ShowMessgae. Then, at this point, angular 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>

Answer 2

add ng-cloak like below

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