How to hide angular expression until it is initialize

Question

This is my angular

<script>
    (function(){
      var app=angular.module("my_post_module",[]);
      app.controller("post_controller",function($http,$scope){
      $scope.getPost=function(id)
      {
        if(id>0)
        {
            $http.post("GetPostController","{\"id\":\""+id+"\"}").then(function(response){
                $scope.adminPost=response.data.adminpostdata;
            },function(error){

            });
        }
    }
});
})();

And My ng-repeat

<div>
        <div ng-repeat="items in adminPost">
            <div>
                <h1>{{items.name}}</h1>
            </div>
            <div>
                <p>{{items.body}}</p>
            </div>
            <div>
                <h5>{{items.work}}</h5>
            </div>
            <div>
                <image ng-src="GetPostImage?requestFileIndex=1&requestId={{items.postId}}" style="width:50%;height:30%;"/>
                <image ng-src="GetPostImage?requestFileIndex=2&requestId={{items.postId}}" style="width:50%;height:30%;"/>
                 <video width="320" height="240" controls>
                      <source ng-src="GetPostImage?requestFileIndex=3&requestId={{items.postId}}">
                </video> 
            </div>
        </div>
    </div>

The problem is that whenever I refresh the page or first load the page for few second it is appearing like {{items.name}} {{items.works}} and so on and then it's automatically disappear , it is working properly but it is very annoying to see this whenever I refresh the page or when I load the page for the very first time. I am trying to use ng-show but it is also not working.

score 1 · Accepted Answer · answered Sep 09 '17 at 05:48

You need ngCloak.

The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading.

Add this directive to your element to prevent showing {{ expression }} before compiling.

<div>
    <h1 ng-cloak>{{items.name}}</h1>
</div>
<div>
    <p ng-cloak>{{items.body}}</p>
</div>
<div>
    <h5 ng-cloak>{{items.work}}</h5>
</div>

Kirit · Answer 2 · 2017-09-09T06:15:09.017

You can use either ng-cloak or ng-bind.

You can add ng-cloak on root div of angular expressions

<div ng-cloak>
    <div ng-repeat="items in adminPost">
        <div>
            <h1>{{items.name}}</h1>
        </div>
        <div>
            <p>{{items.body}}</p>
        </div>
        <div>
            <h5>{{items.work}}</h5>
        </div>
        <div>
            <image ng-src="GetPostImage?requestFileIndex=1&requestId={{items.postId}}" style="width:50%;height:30%;"/>
            <image ng-src="GetPostImage?requestFileIndex=2&requestId={{items.postId}}" style="width:50%;height:30%;"/>
             <video width="320" height="240" controls>
                  <source ng-src="GetPostImage?requestFileIndex=3&requestId={{items.postId}}">
            </video> 
        </div>
    </div>
</div>
<style>
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-         cloak {
display: none !important;
}
</style>

score 1 · Answer 3 · edited Sep 09 '17 at 07:13

1

In your css add

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
 }

And then in you code you can add ng-cloak directive. For example,

<div ng-cloak>
   Welcome {{data.name}}
</div>

Thats it!

edited Sep 09 '17 at 07:13

Naren Murali

19,250
3
27
54

answered Sep 09 '17 at 06:24

setCodesToFire

49
9

Ankit · Answer 4 · 2017-09-09T06:40:24.330

If ng-cloak is not an option, you could also do something like this with ng-bind

<div>
  your content here <p ng-bind="items.works"></p>
</div>

Using ng-bind is often better than interpolation directive

It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before AngularJS compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

refer this SO post and docs for more details

score 0 · Answer 5 · answered Jul 22 '19 at 20:58

If ng-cloak is not an option (e.g. if this is happening dynamically after your app is loaded), and ng-bind is not an option (e.g. if the uncompiled thing causing issues is not text), one fallback is to directly hide an element until angular has done its first pass via ng-class.

Example HTML:

<div class="hidden-on-init"
     ng-class="{'visible': true}"></div>

Example CSS:

.hidden-on-init:not(.visible) {
  display: none;
}

For me, this was useful in a specific case: A CSS animation was quickly playing whenever an element was initialized, even though it should have just started in the fully animated state.

This was caused by Angular temporarily displaying the phantom uncompiled element in the wrong state, without its is-expanded class. This caused the animation to play every time the element was added, for any element whose default state was expanded.

Example HTML:

 <node-expander class="hidden-on-init"
                ng-class="{'visible': true}"
                is-expanded="item.getIsExpanded()"
                on-expand="item.toggleIsExpanded()"></node-expander>

Example LESS:

node-expander {
  &.hidden-on-init:not(.visible) {
    display: none;
  }

  svg {
    transform: rotate(0);
    transition: transform .2s;
    &.is-expanded { // passed through in code not shown
      transform: rotate(90deg);
    }
  }
}

How to hide angular expression until it is initialize

5 Answers5