NG-cloak指令被过早删除

ng-cloak directive gets removed too early

本文关键字：删除 指令 NG-cloak      更新时间：2023-09-26

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

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

  • 我正在文档 HEAD 中加载我的应用程序.js和角度.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;
    }
]);

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

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

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

我已经重现了您的问题，对我有用的事情是创建内部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-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类。

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

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

在

类中使用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>
相关文章：