我有一个问题在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>

当前回答

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>

其他回答

避免断行

<meta http-equiv="Content-Security-Policy"              content="
default-src 'FOO';   
script-src 'FOO';    
style-src  'FOO'; 
font-src 'FOO';">

适用于Firefox 45.0.1

<meta http-equiv="Content-Security-Policy"              content="    default-src 'FOO';    script-src 'FOO';     style-src  'FOO';    font-src 'FOO';">

实际上有两个独立的问题会导致闪烁问题,你可能会面临其中一个或两个。

问题1:ng-cloak应用得太晚

这个问题的解决方法是确保AngularJS加载在头文件中。参见ngCloak文档:

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

问题2:ng-cloak被过早移除

当您的页面上有大量的CSS,规则相互层叠,并且在应用顶层之前较深层的CSS闪现时,最可能发生此问题。

jQuery的解决方案包括在元素中添加style="display:none",只要样式被删除得足够晚,就可以解决这个问题(实际上这些解决方案解决了两个问题)。但是,如果你不喜欢直接在HTML中添加样式,你可以使用ng-show来达到同样的效果。

从问题中的例子开始:

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

在元素中添加额外的ng-show规则:

<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>

(为了避免问题1,你需要带上斗篷)。

然后在你的app.run set isPageFullyLoaded:

app.run(['$rootScope', function ($rootScope) {
    $rootScope.$safeApply = function (fn) {
        $rootScope.isPageFullyLoaded = true;
    }
}]);

注意,根据你正在做的事情,app.run可能是设置isPageFullyLoaded的最佳位置,也可能不是。重要的是确保isPageFullyLoaded在你不想闪烁的东西准备好显示给用户后被设置为true。

听起来问题1是OP正在解决的问题,但其他人发现解决方案不起作用或只部分起作用,因为他们正在解决问题2。

重要提示:请确保在ng-cloak应用太晚和移除太快的情况下使用解决方案。仅解决其中一个问题可能无法缓解症状。

我在使用ngCloak时从未有过太多的运气。尽管上面提到了一切,我仍然会看到闪烁。避免弹移的唯一可靠方法是将内容放在模板中并包含该模板。在SPA中,唯一在被Angular编译之前会被评估的HTML是你的主index.html页面。

只需要把身体里的所有东西都放在一个单独的文件里,然后:

<ng-include src="'views/indexMain.html'"></ng-include>

这样你就不会看到任何闪烁,因为Angular会在将模板添加到DOM之前对其进行编译。

上面列出的解决方案没有一个对我有效。然后我决定看看实际的函数,并意识到当“$scope.”Watch”被解雇了,它在name字段中放置了一个值,这并不意味着是这样的情况。在代码中,我设置oldValue和newValue

$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});

本质上,当范围。在这种情况下,AngularJS监视name变量(model.value)的变化。

我会用<div ng-cloak>包裹<ul>