9

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

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

  • 我正在文件 HEAD 中加载我的 app.js 和 angular.js
  • 我在文档 HEAD 中有我的 CSS
  • 我在我的外部css和内联中包含了带有“！important”的ng-cloak css规则

我怎样才能防止这种闪烁？为什么 ng-cloak 不尊重 ng-show？

索引.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>

应用程序.js：

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

5 回答 5

14

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

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

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

于 2014-05-13T16:03:49.173 回答
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>
于 2013-10-21T17:00:37.197 回答
2

经过一番折腾，我设法通过向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

于 2015-11-05T18:05:58.083 回答
1

ngCloak指令隐藏相关元素直到compile进程结束。这对于隐藏{{ someBinding }}东西很有用，可能没有别的。过程中的实际链接和绑定linking。

为了防止元素的闪烁，它不应该在应用程序自身引导之前出现。你可以看看ngInclude简单的小部件，也可以看看ngView更大、更复杂的东西。

于 2013-10-20T17:12:59.757 回答
0

在类中使用 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>
于 2014-04-06T15:57:04.320 回答