javascript - AngularJS ng-Cloak 不起作用

Question

我很绝望。我遵循了其他帖子中关于此问题的所有建议:我尝试使用 ng-cloak 或 class="ng-cloak"将此规则添加到 css

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

但无事可做，指令不起作用。有人能帮我吗？有没有 ng-cloak 的替代品？我正在用 liferay 开发一个非常大的门户网站，页面需要很多时间来加载，所以使用像 ng-cloak 这样的东西对我来说是基本的!!谢谢

例如这是一个页面:

我将 Liferay 与 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>

Answer 1

您出于某种原因需要“style”属性？此样式覆盖类 css 代码，如果存在，它将始终为“显示:隐藏”。

作为一个快速且简单的选项，您可以使用 ng-if 来显示/隐藏 html 代码。删除所有 ng-cloack 和样式属性并使用:

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

我在带有 liferay 6.2/angular 1.4 的 portlet 中使用它并且它有效。