AngulaJS ng Cloak没有'不起作用

AngulaJS ng-Cloak doesn't work

本文关键字:不起作用 没有 ng Cloak AngulaJS      更新时间:2023-09-26

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

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

但没什么可做的,指令不起作用。有人能帮我吗?有没有ng斗篷的替代品?我正在用liferay开发一个非常大的门户,页面需要很多时间才能加载,所以对我来说,使用ng斗篷这样的东西是最基本的!!感谢

这是一个页面,例如:

我正在使用带有AngularJS 的Liferay

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

您需要"style"属性是有原因的吗?这种样式覆盖类css代码,如果存在,它将始终是"display:hidden"。

作为一个快速&脏选项可以使用ng-if来显示/隐藏html代码。删除所有ng cloack和style属性并使用:

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

我在一个带有liferay 6.2/angular 1.4的portlet中使用了它,它很有效。