54

ng-show/-hide を使用すると、これらのブロックに含まれるコンテンツが最初にユーザー画面に表示されます。数ミリ秒後 (angular.js がロードされて実行された後) にのみ、適切なブロックが ng-show に表示されます。

ng-show/-hide よりも、データの関連セクションのみを DOM にロードするより良い方法はありますか?

ng-view の問題は、ページに 1 つしか表示できないため、現在の状態に基づいて DOM の多くのセクションの動作を切り替える必要があることです。

4

3 に答える 3

107

「コンパイルされていないコンテンツのフラッシュ」を回避するには、代わりにng-bind{{}}を使用するか、ng-cloakを使用します。

<span ng-cloak ng-show="show">Hello, {{name}}!</span>

ng-cloak を使用し、HTML の head セクションに Angular.js をロードしない場合は、これを CSS ファイルに追加し、ページの上部にロードされるようにする必要があります。

[ng\:cloak], [ng-cloak], .ng-cloak { display: none; }

これらのディレクティブは最初のページでのみ使用する必要があることに注意してください。後で (ng-include、ng-view などを介して) 取り込まれたコンテンツは、ブラウザーがレンダリングする前に Angular によってコンパイルされます。

関連するセクションのみが DOM に読み込まれる ng-show / hide 以外のデータを読み込むより良い方法はありますか。

ng-show/ng-hide の代替手段として、 ng -include、ng-switch、および (v1.1.5 以降) ng-if があります。

<div ng-include src="someModelPropertySetToThePartialYouWantToLoadRightNow"></div>

ng-include と連携する ng-switch の例については、https://stackoverflow.com/a/12584774/215945も参照してください。

ng-switch と ng-if は DOM 要素を追加/削除しますが、ng-show/hide は CSS のみを変更することに注意してください (それが重要な場合)。

于 2012-12-28T21:26:18.223 に答える
2

私は ng-cloak トリックを使用しましたが、うまく機能していないようです。Angular のドキュメントに従って、CSS に以下を追加しましたが、動作します。

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

参照: http://docs.angularjs.org/api/ng.directive:ngCloak

于 2014-02-07T21:17:44.723 に答える
1

Mark Rajcok の素晴らしい回答によると、ここに ng-show、ng-switch、および ng-if の動作を示すCodePenがあるので、アプローチを比較して、条件付きコンテンツが実際にレンダリングされる方法の違いを確認できます。

ファイルベースのテンプレートでは、ng-show が ng-switch や ng-if よりも少し速いと感じる人もいることに注意してください。ただし、 $templateCacheを使用して、ブートストラップ時にテンプレートをプリロードし、その利点を減らしたりなくしたりできます。ng-switch と ng-if を使用すると、DOM にある非表示の条件付きコンテンツが不要なときに対処する必要がなくなり、そのコンテンツの式が不適切なときに Angular によって評価されるのを防ぐことができます。これにより、無駄にする必要のない処理リソースが節約され、何かが時期尚早に評価されたときにスローされる可能性のあるエラーが回避されます。

于 2013-11-02T23:46:09.897 に答える