Question

我有一个angular-js应用程序，其中包含一些最初不应显示的控制器。尽管我使用了ng-cloak，它们仍在屏幕上闪烁。问题似乎是编译被调用并删除ng-cloak指令和类，这使得控制器内容可见，即使它不应该是因为ng-show是false。

如果我在ng-cloak的编译方法中暂停js执行，我可以看到元素出现，因为删除了ng-cloak指令。如果我在控制器中暂停js执行（例如在“$ scope.visible = false;”上），我可以看到控制器在页面上保持可见。然后控制器再次不可见，因为它应该在稍后加载时。

我在文档HEAD
我的文件HEAD
我在我的外部css和内联中包含了ng-cloak css规则和“！important”

如何防止闪烁？为什么ng-cloak不尊重ng-show？

的index.html：

<div ng-cloak class="ng-cloak" ng-controller="RoomsController" ng-show="visible">
    <h1>This flashes, it can be seen if we set a breakpoint in the controller js, or after the ng-cloak directive's compile method in angular.js</h1>
</div>

app.js：

app.controller('RoomsController', ['$scope',
    function ($scope) {
        $scope.visible = false;
    }
]);

Answer 1

我在IE mobile中遇到了与 ngCloak 类似的问题。我提出的最简单的解决方案类似于其他一些答案，但我使用 ng-show 而没有任何额外的$scope变量：

<div class="ng-hide" ng-show="true">
  {{mydata}}
</div>

解决方案要求您添加ng-hide类和ng-show="true"。这可确保元素仅在ng-show指令链接后才可见。

Answer 2

我已经复制了您的问题，对我有用的事情是创建内部div并使用ng-if指令而不是ng-show。我希望它有所帮助。

<div data-ng-controller="RoomsController">
    <div ng-cloak class="ng-cloak" data-ng-if="visible" >
        Some text
    </div>        
</div>

Answer 3

经过一番混乱之后，我设法＆＃34;修复＆＃34;这可以通过向元素添加ng-hide类，同时完全删除ng-cloak：

<div class="ng-hide" ng-controller="RoomsController" ng-show="visible">
    <h1>This flashes, it can be seen if we set a breakpoint in the controller js, or after the ng-cloak directive's compile method in angular.js</h1>
</div>

这最初隐藏了元素。 Angular在处理ng-hide指令时会删除ng-show类。

Answer 4

ngCloak指令隐藏相关元素，直到结束compile进程。这对于隐藏{{ someBinding }}内容非常有用，而且可能没有其他内容。 linking进程中的实际链接和绑定。

为了防止元素闪烁，在应用程序引导之前它不应该存在。您可以查看ngInclude的简单小部件，ngView查看更大，更复杂的内容。

Answer 5

在课堂上使用ng-hide，JS会将其取消或重新设置，即使它在那里，但直到JS踢它可以坐在那里使用CSS来隐藏你的div

<div data-ng-controller="RoomsController">
    <div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
        Some text
    </div>        
</div>

ng-cloak指令过早被删除

5 个答案: