ng-cloak 指令过早被删除 [英] ng-cloak directive gets removed too early

问题描述

我有一个 angular-js 应用程序，其中包含一些最初不应显示的控制器.尽管我使用了 ng-cloak，它们还是会在屏幕上闪烁.问题似乎是 compile 被调用并删除了 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?

index.html:

<h1>这个闪烁，可以看出是我们在controller js中设置了断点，还是angular.js中ng-cloak指令的compile方法之后</h1>

app.js:

app.controller('RoomsController', ['$scope',功能($范围){$scope.visible = false;}]);

解决方案

我已经重现了您的问题，对我有用的是创建内部 div 并使用 ng-if 指令代替 ng-show.我希望它有所帮助.

<div ng-cloak class="ng-cloak" data-ng-if="visible" >一些文字

I have an angular-js app with some controllers that shouldn't be shown initially. They flash on the screen despite my use of ng-cloak. The problem seems to be that compile gets called and removes the ng-cloak directives and class, this makes the controllers contents visible even though it shouldn't be because ng-show is false.

If I pause js execution in ng-cloak's compile method I can see the elements appear as the ng-cloak directive is removed. If I pause js execution in the controller (for example on "$scope.visible = false;") I can see the controller stays visible on the page. The controller is then invisible again as it should be sometime later in loading.

• I am loading my app.js and angular.js in the document HEAD
• I have my css in the document HEAD
• I have included the ng-cloak css rule with "!important" in my external css and inline

How can I prevent this flashing? Why doesn't ng-cloak pay respect to 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;
    }
]);

解决方案

I've reproduced your issue and the thing that worked for me was to create inner div and use ng-if directive instead of ng-show. I hope it helps.

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

这篇关于ng-cloak 指令过早被删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！