Angularjs:-Remove double curly brace notation from displaying momentarily before loading

Question

Hi I am a newbie to angularjs.There was a problem I am getting I am getting while trying to implement angularjs in my code.

The below is my code:-

<div class = 'search-icon'>
        <div class = 'iconoverlay hidden-phone' ng-click="clickSearch()"></div>
        <input type='search' id="mainSearch" placeholder='Search TV' ng-model="searchQuery.text" search-auto-complete>
        <div ng-show="showInvalid == true" style="display: block ; margin-top: -8px;color: red;" ng-cloak>Invalid search text</div>
      </div>
      <div class="icon"></div>
    </div>

 <div class='select-language' ng-controller="AppController">
        <a class='btn' style="width: 170px;" id='selectLanguage' ng-controller="AppController" timezone ng-cloak>{{city['city']}}<span class='arrow'></span></a>
      </div>

 <div ng-switch-when="on" class='username'>
          <span width:100px ng-cloak>{{userInfo.name | filterUserName}}</span>
          <div class="btn-group">
            <div class="btn dropdown-toggle moreDropdownTrigger" id="usernameDropdown"></div>

          </div>
        </div>
      </div>

As from the above code I have implemented ng-cloak to to prevent the Angular html template from being briefly displayed by the browser in its raw form while the application is loading.

The below is the image:-

Please help me with it.Thanks

Answer 1

Include ng-cloak directive in your wrapper HTML element

<div ng-cloak>{{ myObject.item }}</div>

and include the following CSS rule in your css file:

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

Answer 2

Seems you are missing style="" in <span width:100px ng-cloak> . Maybe it brokes ng-cloack directive.

Answer 3

Do it like this:

<span ng-cloak> ... </span>

Or:

<span ng-bind="userInfo.name | filterUserName"></span>

Note! put "width: 100%" in "style" attribute

Answer 4

or you can do:

<span ng-bind-template="{{ userInfo.name }}">Your Default value</span>

I uses this and always work, the point is sometimes you can have some default value to just fill the text content before anything shows up, or you can leave it blank.

Answer 5

Instead of using ng-cloak and having to write a css class for ng-cloak, using just ng-bind is more powerful.

<div class='select-language' ng-controller="AppController">
    <a class='btn' style="width: 170px;" id='selectLanguage' ng-controller="AppController" timezone ng-bind="city['city']">loading...<span class='arrow'></span></a>
  </div>

One more interesting feature of ng-bind is the ability to set default value before data is loaded in the code above, i used "Loading..." you can also leave it blank if you wish. also, you can check the angular API doc https://docs.angularjs.org/api/ng/directive/ngBind