我很绝望。我已经按照其他帖子的所有建议来解决这个问题: 我曾尝试使用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>
答案 0 :(得分:1)
有一些原因你需要&#34; style&#34;属性?这种风格会覆盖类css代码,如果存在,它将永远是&#34; display:hidden&#34;。
作为快速和肮脏的选项,您可以使用ng-if来显示/隐藏HTML代码。删除所有ng-cloack和style属性并使用:
<div ng-if="loadEnded"> content </div>
我在带有liferay 6.2 / angular 1.4的portlet中使用它并且它可以工作。