AngulaJS ng Cloak没有'不起作用
AngulaJS ng-Cloak doesn't work
我绝望了。我遵循了其他帖子中关于这个问题的所有建议:我尝试过使用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中使用了它,它很有效。
相关文章:
- 我的AngularJS表达式没有'不起作用
- jpm的默认Firefox路径没有'不起作用
- pageMod没有'似乎不起作用
- jQuery.remove(Selector)没有'不起作用
- Phonegap 3.7.0手电筒插件没有'不起作用
- Javascript,如果条件在没有&&逻辑运算符当&&它不起作用
- javascript选项卡没有'不起作用
- JQuery示例不起作用-“;对象没有't支持属性或方法'按钮'&”;
- I'我试图在文本区域中进行特定的输入,调用特定的javascript函数,但没有成功;不起作用
- 手机摄像头没有'不起作用
- AngularJS没有'不起作用
- I'我不知道为什么我的代码没有'不起作用
- -webkit转换在JavaScript旋转动画中不起作用(没有JQuery)
- 角度 UI 类型提前不起作用 - 没有错误
- Jquery 谷歌自动完成不起作用 - 没有错误
- 在iframe中编写一些html和js,在IE中不起作用:没有定义$
- Peerjs不起作用.没有错误
- Twitter Bootstrap的下拉菜单不起作用——没有展开
- jQuery在任何浏览器中都不起作用(没有任何效果),但它在Codepen中工作
- 文档就绪不起作用.没有控制台错误,并且包括jQuery