我有一个问题在angular.js的指令/类ng-斗篷或ng-show。

Chrome运行正常,但Firefox使用ng-cloak或ng-show导致元素闪烁。 恕我直言,这是由于将ng-cloak/ng-show转换为style="display: none;",可能Firefox javascript编译器有点慢,所以元素出现一段时间,然后隐藏?

例子:

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

当前回答

我有一个类似的问题,并发现如果你有一个类包含过渡,元素将闪烁。我试图添加ng-cloak,但没有成功,但通过删除过渡按钮停止闪烁。

我用的是离子框架,纽扣轮廓有这样的过渡

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

只需重写类以删除转换,按钮就会停止闪烁。

更新

同样,在ionic上使用ng-show/ng-hide时会出现闪烁。添加以下CSS可以解决这个问题:

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

来源:http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9

其他回答

我有一个类似的问题,并发现如果你有一个类包含过渡,元素将闪烁。我试图添加ng-cloak,但没有成功,但通过删除过渡按钮停止闪烁。

我用的是离子框架,纽扣轮廓有这样的过渡

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

只需重写类以删除转换,按钮就会停止闪烁。

更新

同样,在ionic上使用ng-show/ng-hide时会出现闪烁。添加以下CSS可以解决这个问题:

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

来源:http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9

我不能让这些方法工作,所以我最终做了以下。对于你最初想隐藏的元素:

<div <!--...--> style="display: none;" ng-style="style">

然后在你的控制器中,在顶部或顶部附近添加以下内容:

$scope.style = { display: 'block' };

这样,元素最初是隐藏的,只有当控制器代码实际运行时才显示。

您可以根据需要调整位置,也许还可以添加一些逻辑。在我的例子中,如果当前没有登录,我将切换到登录路径,并且不希望我的界面事先闪烁,因此我设置了$scope。样式后的登录检查。

确保AngularJS包含在HTML的头部。参见ngCloak文档:

为了得到最好的结果,angular.js脚本必须加载在头文件中 HTML文件的部分;或者,CSS规则(上面)必须是 包含在应用程序的外部样式表中。

ngBind和ngBindTemplate是不需要CSS的替代品:

<div ng-show="foo != null" ng-cloak>{{name}}</div>  <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>

最好使用ng-if而不是ng-show。ng-if完全删除并重新创建DOM中的元素,并有助于避免ng-shows闪烁。