ng-cloak 指令被过早删除答案

【问题标题】：ng-cloak directive gets removed too earlyng-cloak 指令被过早删除
【发布时间】：2013-10-20 11:35:15
【问题描述】：

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

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

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

如何防止这种闪烁？为什么 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;
    }
]);

【问题讨论】：

你试过嵌套你的代码吗？所以你有一个带有ng-cloak 的DIV 并且在它里面有另一个DIV 有ng-show 指令？ :)
不知道为什么这会有所帮助，因为 ng-cloak 无论如何都会提前删除。但我试过了，因为你建议。没有效果。

标签： javascript html angularjs angularjs-directive

【解决方案1】：

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

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

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

【讨论】：

我会说这是一个比公认答案更好的解决方案。轻松修复，不会破坏任何已经存在的 ng-show/hide 动画。
什么是“ng-hide”类？它只是一个占位符还是有 css 选择器 ng-hide？span>
这应该是公认的答案。唯一正确的解决方案。

【解决方案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>

【讨论】：

这是我可以开始工作的唯一解决方法。 ng-cloak 不应该处理我的用例吗？想知道我是否需要提交错误报告。

【解决方案3】：

经过一番折腾，我设法通过将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-show 指令时删除了 ng-hide 类。

【讨论】：

【解决方案4】：

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

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

【讨论】：

我尝试了 ngInclude，但这让闪烁变得更糟！现在，面板在屏幕上闪烁时会显示动画。顺便说一句，我使用的是 1.2.0rc3。

【解决方案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>

【讨论】：