NG-披风指令被太早清除 [英] ng-cloak directive gets removed too early

问题描述

我有一些控制器，不应该被初步显示出一个角的js应用。他们在屏幕上闪烁，尽管我用NG-斗篷。这个问题似乎是，编译被调用，并删除NG-斗篷指令和类，这使得控制器的内容可见，即使它不应该是因为NG-节目是假的。

如果我在暂停NG-斗篷的编译方法JS执行，我可以看到作为NG-斗篷指令被删除的元素出现。如果我在控制器暂停执行JS（例如在$ scope.visible = FALSE;），我可以看到该控制器停留在页面上可见。该控制器然后再看不见的，它应该是在装载晚些时候。

• 我加载我app.js和angular.js在文档HEAD


• 我有我的CSS文档的HEAD


• 我已经包含在NG-斗篷CSS规则！重要的在我的外部CSS和内联

我怎样才能prevent这个闪烁？为什么不NG-斗篷瞻仰纳克出现？

index.html的：

 ＆LT; D​​IV NG-披风类=NG-斗篷NG控制器=RoomsControllerNG-秀=看得见＆GT;
    ＆LT; H1＆gt;这闪烁，可以看出，如果我们在控制器JS设置一个断点，或angular.js＆LT的NG-斗篷指令的编译方法之后; / H1＆GT;
＆LT; / DIV＆GT;
 

app.js：

  app.controller（'RoomsController'，['$范围'，
    功能（$范围）{
        $ scope.visible = FALSE;
    }
]）;
 

解决方案

我复制你的问题，并为我工作的事情是创造内在 DIV 和使用 NG-如果指令而不是 NG-节目。我希望它能帮助。

 ＆LT; D​​IV数据-NG-控制器=RoomsController＆GT;
    ＆LT; D​​IV NG-披风类=NG-斗篷数据-NG-IF =看得见＆GT;
        某些文本
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

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-披风指令被太早清除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！