我有个问题.js指令/ng-cloak级或ng-show级.

Chrome可以正常工作,但Firefox会导致ng-cloakng-show的元素闪烁.

示例:

<ul ng-show="foo != null" ng-cloak>..</ul>

推荐答案

尽管文档没有提到这一点,但是将display: none;规则添加到您的CSS可能还不够.如果要在正文中加载angular.js,或者模板编译得不够快,请使用ng-cloak指令and在CSS中包含以下内容:

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

正如 comments 中提到的,!important是重要的.例如,如果您有以下标记

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

而您恰好使用了bootstrap.css,下面的 Select 器更适合您的ng-cloak'ed元素

.nav > li > a {
  display: block;
}

因此,如果您将一条规则包含为display: none;,则 bootstrap 规则将优先,display将设置为block,因此您将在模板编译之前看到闪烁.

Javascript相关问答推荐

在JavaScript中使用setProperty方法试图修改css元素值时,我遇到错误

错误:(0,react__WEBPACK_IMPORTED_MODULE_1__.useSYS State)不是函数或其返回值不可迭代

如何解决(不忽略)reaction详尽的linter规则,而不会在获取数据时导致无限的reender循环

Fastify错误:CORS策略已阻止从起源api-dev.example.com上的MLhttp请求

更新Reduxstore 中的状态变量,导致整个应用程序出现不必要的重新渲染

如何避免使用ajax在Vue 3合成API中重定向

vanillajs-datepicker未设置输入值,日期单击时未触发更改事件

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗?

如何在Obsidian dataview中创建进度条

如何在Javascript中使用Go和检索本地托管Apache Arrow Flight服务器?

Chromium会将URL与JS一起传递到V8吗?

在react JS中映射数组对象的嵌套数据

变量的值在Reaction组件中的Try-Catch语句之外丢失

让chart.js饼图中的一个切片变厚?

在画布中调整边上反弹框的大小失败

为什么我的按钮没有从&q;1更改为&q;X&q;?

使用类型:assets资源 /资源&时,webpack的配置对象&无效

如何在和IF语句中使用||和&;&;?

我正在试着做一个TicTacToe Ai来和我玩.但是,我试着在第一个方块被点击时出现一个X,然后在第二个方块之后出现一个O

如何根据查询结果重新排列日期