9

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

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:

<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;
    }
]);
4

5 に答える 5

14

IE モバイルのngCloak でも同様の問題がありました。私が思いついた最も簡単な解決策は、他のいくつかの回答と似ていますが、代わりにng-show$scopeを使用し、追加の変数は使用しません。

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

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

于 2014-05-13T16:03:49.173 に答える
2

いろいろいじった後、完全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-hideを処理するときにクラスを削除します。ng-show

于 2015-11-05T18:05:58.083 に答える
1

ngCloakディレクティブは、関連する要素を終了compileプロセスまで非表示にします。これは何かを隠すのに役立ち{{ someBinding }}ますが、それ以外にはおそらく何もありません。プロセスにおける実際のリンクとバインディングlinking。

要素の点滅を防ぐには、アプリケーションがブートストラップするまで存在しないようにする必要があります。ngIncludeシンプルなウィジェットから、ngView大きくて複雑なものまでご覧いただけます。

于 2013-10-20T17:12:59.757 に答える
0

クラスで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>
于 2014-04-06T15:57:04.320 に答える