AngulaJS ng-Cloak doesn't work

Question

I'm desperate. I've followed all the advices on the others post about this problem: I've tried to use ng-cloak or class="ng-cloak" , to add this rule to css

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

But nothing to do , the directive doesn't work. Can someone help me? Is there an alternative to ng-cloak? I'm developing a very big portal with liferay , the page needs a lot of time to be loader , so it is fundamental for me to use something like ng-cloak!! Thanks

This is a page for example:

I'm using Liferay with AngularJS

<div class="navbar ng-cloak" style="display:hidden;" ng-style="loaded"  ng-controller="NavBarController">
    <div class="navbar-inner ng-cloak" ng-show="navbarScope.menuEpermessiRetrieved" >

      <div class="container ng-cloak" style="width: auto;" ng-show="navbarScope.showNavbar" ng-cloak>

          <!-- navbar per acquisitore -->
         <ul class="nav ng-cloak" role="navigation" id="navigatorAcquisitore" ng-if="navbarscope.isAcquisitore">
<%--            <li  role="presentation" ng-hide="${isAcquisizione}" ><a role="menuitem"  tooltip="{{navbarScope.acquisizione.description}}" tabindex="-1" href="${goToAcquisizioneURL}" >{{navbarScope.acquisizione.title}} </a> </li> --%>
            <li class="active ng-cloak" role="presentation" ng-if="navbarscope.isAcquisitore" ><a role="menuitem" tabindex="-1" href="${goToAcquisizioneURL}" class="ng-cloak">{{navbarScope.acquisizione.title}} </a></li>

         </ul>


        <a class="brand ng-cloak" id="toolTipHome" ng-if="!navbarScope.isAcquisitore"  href="${goToHomeURL}">
            <i class="ng-cloak glyphicon glyphicon-home" tooltip="{{navbarScope.brand.description}}" data-toggle="tooltip" data-placement="bottom" title="{{navbarScope.brand.description}}"></i> 
        </a>



            <!-- navbar standard -->            
            <ul class="nav ng-cloak" role="navigation"  ng-if="!navbarScope.isAcquisitore"> 

                <ul class="nav ng-cloak" id="menuAttivita" ng-if="navbarScope.menuAttivita">

                    <li class="ng-cloak" role="presentation" ng-hide="${isAttivita}"><a role="menuitem" class="ng-cloak" tooltip="{{navbarScope.menuAttivita.description}}" tabindex="-1" href="${goToAttivitaURL}">{{navbarScope.menuAttivita.title}} </a></li>                
                    <li class="active ng-cloak" role="presentation" ng-show="${isAttivita}"><a c role="menuitem" tooltip="{{navbarScope.menuAttivita.description}}" class="ng-cloak" tabindex="-1" href="${goToAttivitaURL}">{{navbarScope.menuAttivita.title}}</a></li>                

<%--                    <li id="fat-menu" class="dropdown active" ng-show="${isAttivita}"> --%>
<!--                        <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">{{navbarScope.menuAttivita.title}} <b class="caret"></b></a> -->
<!--                         <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> -->
<!--                           <li role="presentation" ng-repeat="action in navbarScope.menuAttivita.actions" ><a role="menuitem" tabindex="-1" href="" ng-click="exec(action.action)" ng-cloak>{{action.name}}</a></li>   -->

<!--                        </ul>  -->
<!--                    </li> -->


                </ul>

                <!-- area di lavoro -->
                <li role="presentation" class="ng-cloak" ng-hide="${isAreaDiLavoro}"><a  class="ng-cloak" role="menuitem" tooltip="{{navbarScope.areaDiLavoro.description}}" tabindex="-1" href="${goToAreaDiLavoroURL}" >{{navbarScope.areaDiLavoro.title}}</a></li>
                <li class="active ng-cloak" role="presentation" ng-show="${isAreaDiLavoro}"><a class="ng-cloak" role="menuitem" tooltip="{{navbarScope.brand.description}}" tabindex="-1" href="${goToAreaDiLavoroURL}" ng-click="hideMenu()" >{{navbarScope.areaDiLavoro.title}}</a></li>


                 <!-- area archivio -->                
                <li  role="presentation" class="ng-cloak" ng-hide="${isDocumenti}"><a role="menuitem" tooltip="{{navbarScope.areaArchivio.description}}" tabindex="-1" href="${goToDocumentiURL}" class="ng-cloak" >{{navbarScope.areaArchivio.title}}</a></li>
                <li   class="active ng-cloak" role="presentation" ng-show="${isDocumenti}"><a role="menuitem" class="ng-cloak" tooltip="{{navbarScope.brand.description}}" tabindex="-1" href="#" >{{navbarScope.areaArchivio.title}}</a></li>


            </ul>

            <!-- menu fascicolo standard -->
            <ul id="navigatorStandard" class="nav ng-cloak" ng-if="navbarScope.mostraFascicoliStandard" >

                <li class="dropdown ng-cloak" ng-if="!${isFascicoloStandardCreate} && !${isFascicoloStandardSearch}" >
                   <a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliStandard.description}} " >
                    {{navbarScope.fascicoliStandard.title}} <b class="caret ng-cloak"></b>
                   </a>
                   <ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3"> 

                     <li role="presentation " class="ng-cloak" ng-if="navbarScope.fsCreateAllowed">
                        <a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardCreateURL}" > Crea </a>
                     </li> 

                     <li role="presentation" class="ng-cloak" ng-if="navbarScope.fsSearchAllowed">
                        <a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardSearchURL}" > Ricerca </a>
                     </li>


                   </ul>


               </li>

               <li  class="dropdown active ng-cloak" ng-if="${isFascicoloStandardCreate} || ${isFascicoloStandardSearch}" >
                   <a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliStandard.description}} " >
                    {{navbarScope.fascicoliStandard.title}} <b class="caret"></b>
                   </a>
                   <ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3"> 
                     <li role="presentation" class="ng-cloak" ng-if="navbarScope.fsCreateAllowed  && !${isFascicoloStandardCreate}">
                        <a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardCreateURL}" > Crea </a>
                     </li> 

                      <li role="presentation" class="ng-cloak" ng-if="navbarScope.fsCreateAllowed && ${isFascicoloStandardCreate}">
                        <a role="menuitem" class="ng-cloak" tabindex="-1" ng-click="showCreaFascicoloStandard()" > Crea </a>
                     </li> 

                     <li role="presentation" class="ng-cloak" ng-if="navbarScope.fsSearchAllowed  &&  !${isFascicoloStandardSearch}">
                        <a role="menuitem" tabindex="-1" href="${goToFStandardSearchURL}" class="ng-cloak" > Ricerca </a>
                     </li> 

                     <li class="ng-cloak" role="presentation" ng-if="navbarScope.fsSearchAllowed  &&  ${isFascicoloStandardSearch}">
                        <a role="menuitem" tabindex="-1" class="ng-cloak" ng-click="backToRicerca()" > Ricerca </a>
                     </li> 
                   </ul>


               </li>

            </ul>

            <!-- menu fascicoli del personale-->
            <ul class="nav ng-cloak" id="navigatorPersonale" ng-if="navbarScope.mostraFascicoli">

                <li  class="dropdown ng-cloak" ng-if="!${isFascicoloPersonaleCreate} && !${isFascicoloPersonaleSearch}" >
                   <a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliPersonale.description}} " >
                    {{navbarScope.fascicoliPersonale.title}} <b class="caret"></b>
                   </a>
                   <ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3"> 
                     <li role="presentation" ng-if="navbarScope.fpCreateAllowed" class="ng-cloak">
                        <a role="menuitem" tabindex="-1" class="ng-cloak" href="${goToFPersonaleCreateURL}" > Crea </a>
                     </li> 
                     <li class="ng-cloak" role="presentation" ng-if="navbarScope.fpSearchAllowed">
                        <a class="ng-cloak" role="menuitem" tabindex="-1" href="${goToFPersonaleSearchURL}" > Ricerca </a>
                     </li> 
                   </ul>


               </li>

               <li  class="dropdown active ng-cloak" ng-if="${isFascicoloPersonaleCreate} || ${isFascicoloPersonaleSearch}" >
                   <a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliPersonale.description}} " >
                    {{navbarScope.fascicoliPersonale.title}} <b class="caret"></b>
                   </a>

                   <ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3"> 

                     <li role="presentation" class="ng-cloak" ng-if="navbarScope.fpCreateAllowed  &&  !${isFascicoloPersonaleCreate}">
                        <a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFPersonaleCreateURL}" > Crea </a>
                     </li> 

                     <li role="presentation" class="ng-cloak" ng-if="navbarScope.fpCreateAllowed  &&  ${isFascicoloPersonaleCreate}">
                        <a role="menuitem" class="ng-cloak" tabindex="-1" ng-click="goToCrea()" > Crea </a>
                     </li> 

                     <li role="presentation" class="ng-cloak" ng-if="navbarScope.fpSearchAllowed  &&  !${isFascicoloPersonaleSearch}">
                        <a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFPersonaleSearchURL}" > Ricerca </a>
                     </li> 

                     <li class="ng-cloak" role="presentation" ng-if="navbarScope.fpSearchAllowed  &&   ${isFascicoloPersonaleSearch}">
                        <a class="ng-cloak" role="menuitem" tabindex="-1" ng-click="goToCerca()"  > Ricerca </a>
                     </li> 

                   </ul>


               </li>



<%--                <li  role="presentation" ng-hide="${isFascicoloPersonale}" ><a  role="menuitem" tooltip="{{navbarScope.fascicoliPersonale.description}}" tabindex="-1" href="${goToFascicoloPersonaleURL}" ng-cloak>{{navbarScope.fascicoliPersonale.title}} <b class="caret" ></b></a></li> --%>
<%--                 <li id="fat-menu" class="dropdown active" ng-show="${isFascicoloPersonale}"> --%>
<!--                     <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" ng-cloak>{{navbarScope.fascicoliPersonale.title}} <b class="caret" ></b></a> -->
<!--                     <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> -->
<!--                         <li role="presentation" ng-repeat="action in navbarScope.fascicoliPersonale.actions" ><a role="menuitem" tabindex="-1" href="" ng-click="exec(action.action)" ng-cloak>{{action.name}}</a></li> -->
<!--                     </ul> -->
<!--                 </li> -->

            </ul>


        <ul class="nav pull-right ng-cloak"   id="listaUffici">

               <li id="fat-listaUffici-menu" class="dropdown ng-cloak" >
                   <a href="#" id="drop6" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" title="{{navbarScope.ufficioSelected.nomeUnitaOrganizzativa}} " >{{navbarScope.ufficioSelected.displayName}} 
                   <b class="caret ng-cloak" ng-show="navbarScope.listaUffici.length>1"></b></a>

                   <ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop6" ng-show="navbarScope.listaUffici" >

                       <li role="presentation" class="ng-cloak" ng-repeat="u in navbarScope.listaUffici" class="ng-cloak"><a role="menuitem" tabindex="-1" href="" ng-click="navbarScope.cambiaUfficio(u)" title="{{u.nomeUnitaOrganizzativa}}" >{{u.displayName}}</a>
                    </li>
                   </ul>
               </li>

               <li id="fat-listaRuoli-menu" class="dropdown ng-cloak" >
                   <a href="#" id="drop7" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" title="{{navbarScope.ruoloSelected.codice}}" >{{navbarScope.ruoloSelected.codice}} 
                <b class="caret ng-cloak" ng-show="navbarScope.ufficioSelected.ruoli.length>1"></b>
                </a>

                   <ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop7"  >

                       <li role="presentation" ng-repeat="r in navbarScope.ufficioSelected.ruoli" class="ng-cloak" >
                    <a role="menuitem" class="ng-cloak" tabindex="-1" href="" ng-click="navbarScope.cambiaRuolo(r)" title="{{r.codice}}" >{{r.codice}}</a>
                    </li>
                   </ul>
               </li>
         </ul>

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

We might need to see more info/code about how it's being used. — Chewpers, Jan 08 '16 at 13:38
So what exactly are you trying to accomplish with ng-cloak? The purpose of the class is to prevent the raw template code from being displayed on the screen while your directive is being compiled. If you are trying to do something beyond that such as waiting for data from the server or another part of the app, then ng-cloak will not help. For that you would need something like ng-if or ng-show. — pbuchheit, Jan 08 '16 at 13:54
I'm trying to avoid the variables visualization before they are synchronized. At the page load beginning I see the variables in the form {{variable1}} {{variable2}} ... I'm trying to use ng-cloak to avoid this ... so you say I can use ng-if or ng-show ? — J_U_S_T, Jan 08 '16 at 14:00
This datas anyway come from a DB , so please why don't you make me an exaple? How can I Hide variables before they come filled? — J_U_S_T, Jan 08 '16 at 14:10
@J_U_S_T It looks like you're trying [multiple ways](http://stackoverflow.com/a/31982123/1002222) to get the ng-cloak to work, these might be interfering with one another. I can't tell why it isn't working but I suggest making a temp page and test with a simple single element. — Gaʀʀʏ, Jan 08 '16 at 16:24

score 1 · Answer 1 · answered Mar 04 '16 at 10:36

There is some reason you need the "style" attribute? This style overrides the class css code and if is present it will always be "display:hidden".

As a quick&dirty option you can use ng-if to show/hide html code. Remove all ng-cloack and the style attribute and use:

<div ng-if="loadEnded"> content </div>

I used it in a portlet with liferay 6.2/angular 1.4 and it works.

AngulaJS ng-Cloak doesn't work

1 Answers1