ng-show/-hideの代わり、またはDOMの関連セクションのみをロードする方法

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

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

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

53
nl ru de

3 答え

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

Hello, {{name}}!

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

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

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

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

ng-show/ng-hideの代替手段には、 ng-include 、 a href = "http://docs.angularjs.org/api/ng.directive:ngSwitch" rel = "nofollow noreferrer"> ng-switch および(v1.1.5以降) ng-if

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

ng-switchの例については、 https://stackoverflow.com/a/12584774/215945 を参照してください。 -含める。

ng-showとng-ifはDOM要素を追加/削除しますが、ng-show/hideはCSSを変更するだけです(あなたにとって重要な場合)。

106
追加された
@MarkRajcokコンテンツを表示するには {{}} の代わりに ng-bind
追加された 著者 ???????,
こんにちは@MarkRajcok私はこのソリューションを試してみましたが、それは私のために働いていません:(あなたはここで見て気にしますか?私はそれを簡単にデバッグするために含める必要があることを教えてください! stackoverflow.com/questions/30540119/…
追加された 著者 Leon Gaban,
+1の答え
追加された 著者 murtaza52,
@ user1226868、コメントありがとうございます。私はあなたのページの一番下にAngularをロードすると(これはしばしば推奨される)、CSSが遅すぎます。また、ng-cloak APIページを引用するには、 "最良の結果を得るには、angular.jsスクリプトをhtmlファイルのheadセクションにロードするか、CSSのルール(上記)をアプリケーションの外部スタイルシートに含める必要があります"
追加された 著者 Mark Rajcok,
@CMCDragonkai、ng-ifとプランナー注意Angular v1.1.5が含まれています。
追加された 著者 Mark Rajcok,
@太極拳無極而生、良い点、ありがとう。私は答えを更新しました。
追加された 著者 Mark Rajcok,
関数式に基づいてng-ifを使用しようとしています。しかし、関数が動作していても、ng-ifはDOMを削除しません。実際、私の最近のAngularJSアプリでは、何もしません。私はng-showに頼らざるを得なかった。 DOMを削除するときに誰かがng-ifの実際の例を挙げることはできますか?
追加された 著者 CMCDragonkai,
Angularがこれを頭の中に入れているので、CSSは必要ありません。
追加された 著者 user1226868,

私はng-cloakトリックを使いましたが、それはうまく動かないようです。 Angularドキュメンテーションに続いて私はCSSに以下を追加しました。それはうまくいきます:

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

See: http://docs.angularjs.org/api/ng.directive:ngCloak

2
追加された

マークRajcokの素晴らしい答えは、ng-show、ng-switch、ng-ifが動作しているコードペーンです。アプローチを比較して、条件付きコンテンツが実際にレンダリングされる方法の違いを確認することができます。

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

1
追加された
Angular - 日本のコミュニティ [ja]
Angular - 日本のコミュニティ [ja]
3 参加者の

このグループではAngularについて話します。 パートナー:kotaeta.com