CODEWITHSUNDEEP
javascriptjqueryangularjs
user3615856
user3615856

Reputation:

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

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:-

enter image description here

Please help me with it.Thanks

Upvotes: 0

Views: 2593

Answers (5)

Lukman Ottun
Lukman Ottun

Reputation: 1

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

Upvotes: 0

Ian Zhao
Ian Zhao

Reputation: 1173

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.

Upvotes: 0

Muhammad Reda
Muhammad Reda

Reputation: 27033

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

Upvotes: 1

karaxuna
karaxuna

Reputation: 26940

Do it like this:

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

Or:

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

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

Upvotes: 0

Jan Barta
Jan Barta

Reputation: 460

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

Upvotes: 0

Related Questions