ng-cloakディレクティブがあまりにも早く削除されます

Question

私は最初に表示すべきではないいくつかのコントローラを備えたangle-jsアプリケーションを持っています。彼らはng-cloakの使用にもかかわらず画面上で点滅します。この問題は、コンパイルが呼び出され、ng-cloakのディレクティブとクラスを削除するように思われます。これは、ng-showがfalseであるためではないにもかかわらずコントローラの内容が表示されるようにします。

ng-cloakのコンパイルメソッドでjsの実行を一時停止すると、ng-cloakディレクティブが削除されたときに要素が表示されます。コントローラーでjsの実行を一時停止すると（たとえば、 "$ scope.visible = false;"）、コントローラーがページに表示されたままになっているのがわかります。コントローラは、ロード中に後で表示されるはずですから、再び表示されません。

• 私は私が「重要！」とNG-マントのCSSルールが含まれている私は、文書のHEAD
• の私のCSSを持っている文書のHEAD
• で私app.jsとangular.jsをロードしています私の外部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; 
    } 
]); 

Answer 1

あなたの問題を再現しました。私のために働いたのは、内部がdivで、ng-showの代わりにng-ifディレクティブを使用することでした。私はそれが助けて欲しい

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

Answer 2

ngCloak指令端compileプロセスまで、関連する要素を非表示にします。これは{{ someBinding }}のものを隠すのに便利です。 linkingプロセスにおける実際のリンクとバインディング

要素の点滅を防ぐには、アプリケーションが自身をブートストラップするまでそこに置くべきではありません。単純なウィジェットの場合はngInclude、大きく複雑なものの場合はngViewをご覧ください。

Answer 3

JSがありますが、JSキックまでその中には、そこに座って、あなたのdiv

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

を隠すためにCSSを使用することができても、それを取るか、それを再度設定し、クラスでNG-皮を使用

Answer 4

IEモバイルでngCloakと同様の問題がありました。私が思いついた最も簡単な解決策は、他の回答の一部に似ていますが、私の代わりにNG-ショーを使用して、余分な$scope変数なし：

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

ソリューションは、あなたがng-hideクラスを追加することを必要とし、 ng-show="true"。これにより、要素は、ng-showディレクティブがリンクされた後にのみ表示されます。完全ng-cloakを除去しながら

Answer 5

はたくさんいじり後、私は、要素にng-hideクラスを追加することで、これを「修正」するために管理：

<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クラスを削除します。