ng-cloak指令过早被删除

Question

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

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

• 我在文档HEAD中加载我的app.js和angular.js
• 我在文档HEAD中有我的CSS
• 我在我的外部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>