盎格鲁- ngcloak / ngg展示blink元素

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

当前回答

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

其他回答

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

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

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

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

问题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应用太晚和移除太快的情况下使用解决方案。仅解决其中一个问题可能无法缓解症状。

试着关闭Firebug。我是认真的。这对我很有帮助。

应用已接受的答案，然后确保Firefox中的Firebug已关闭:按F12，然后关闭此页的Firebug -右上角的小按钮。

我有一个类似的问题，并发现如果你有一个类包含过渡，元素将闪烁。我试图添加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

正如在文档中提到的，你应该添加一个规则到你的CSS来隐藏它基于ng-cloak属性:

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

我们在“用Angular构建”网站上使用了类似的技巧，你可以在Github上查看源代码:https://github.com/angular/builtwith.angularjs.org

希望有帮助!

推荐文章