Ng-ifとng-show/ng-hideのどちらを優先するか
ng-showとng-hideは要素に設定されたクラスに影響し、ng-ifは要素がDOMの一部としてレンダリングされるかどうかを制御することを理解しています。
ng-if/ng-showよりng-hideを選ぶことに関するガイドラインはありますか、またはその逆です。
あなたのユースケースによりますが違いを要約するために：
ng-ifはDOMから要素を削除します。これは、あなたのすべてのハンドラ、またはそれらの要素に結び付けられている何か他のものが失われることを意味します。たとえば、クリックハンドラを子要素の1つにバインドした場合、ng-ifがfalseに評価されると、その要素はDOMから削除され、後でng-ifがtrueに評価されて要素が表示された後もクリックハンドラは機能しなくなります。ハンドラーを再接続する必要があります。ng-show/ng-hideはDOMから要素を削除しません。これはCSSスタイルを使用して要素を表示/非表示にします（注意：独自のクラスを追加する必要があるかもしれません）。このようにして、子供に付けられていたあなたのハンドラは失われることはありません。ng-ifは子スコープを作成しますが、ng-show/ng-hideは作成しません。
DOMに含まれていない要素はパフォーマンスへの影響が少なく、ng-ifを使用した場合、ng-show/ng-hideと比較してWebアプリケーションのほうが速く見える場合があります。私の経験では、その違いはごくわずかです。 ng-show/ng-hideとng-ifの両方を使用する場合はアニメーションが可能です。両方の例はAngularのドキュメントにあります。
最終的に、あなたが答える必要がある質問はあなたがDOMから要素を削除できるかどうかです。
Ng-if/ng-showがDOMごとにどのように機能するかの違いを示すCodePenについては、 here を参照してください。
@markovuksanovicが質問に回答しています。しかし、別の観点から考えてみましょう。 always ng-ifを使用し、それらの要素をDOMから取り出します。
- 見えない間は、何らかの理由でデータバインディングと
$watchcode要素をアクティブにしておく必要があります。フォーム全体が有効かどうかを判断するために、現在表示されていない入力の妥当性をチェックできるようにするには、フォームが適しています。 - 上で述べたように、あなたは条件付きイベントハンドラで本当に精巧なステートフルロジックを使用しています。 それは と言った、もしあなたがng-ifを使うときに重要な状態を失っているように、手動でハンドラをアタッチしたりデタッチしたりするのなら、その状態がデータモデルでよりよく表されるかどうか自問しなさい。要素がレンダリングされるときはいつでも、ハンドラはディレクティブによって条件付きで適用されます。別の言い方をすれば、ハンドラの有無は状態データの一種です。そのデータをDOMから取り出し、モデルに入れます。ハンドラの有無はデータによって決定されるため、再現が容易です。
Angularは本当によく書かれています。何をするのかを考えると、速いです。しかし、それがしているのは、（2方向データバインディングのような）難しいことを簡単に見せるための、たくさんの魔法です。これらすべてを簡単に見せるには、いくらかのパフォーマンスのオーバーヘッドが伴います。誰も見ていないDOMの塊の上で、$digestサイクルの間にセッター関数が評価される回数が何百回から何千回になることにあなたはショックを受けるかもしれません。そして、何十、何百という目に見えない要素がすべて同じことをしていることに気付くでしょう。
デスクトップは、ほとんどのJS実行速度の問題を解決できないほど強力なものになる可能性があります。しかし、モバイル向けに開発しているのであれば、人が可能な限りng-ifを使用するのは簡単なことです。 JSの速度は依然としてモバイルプロセッサで重要です。 ng-ifを使用することは、非常に低コストで潜在的に重要な最適化を得るための非常に簡単な方法です。
私の経験から：
1）ng-if/ng-showを使用して表示/非表示を切り替えるトグルがページにある場合、ng-ifはブラウザの遅延をより遅くします（遅くします）。たとえば、2つのビューを切り替えるためのボタンがある場合は、ng-showの方が速いようです。
2）ng-ifは、true/falseと評価されたときにスコープを作成/破棄します。 ng-ifにコントローラが接続されている場合、そのコントローラコードはng-ifがtrueと評価されるたびに実行されます。 ng-showを使用している場合、コントローラコードは一度だけ実行されます。そのため、複数のビューを切り替えるボタンがある場合は、ng-ifとng-showを使用すると、コントローラコードの記述方法に大きな違いが生じます。
答えは簡単ではありません。
ターゲットマシン（モバイル対デスクトップ）、データの性質、ブラウザ、OS、実行されるハードウェアによって異なります。本当に知りたい場合は、ベンチマークを行う必要があります。
ほとんどのパフォーマンスの問題と同様に、リストのように 繰り返し要素 （n）を指定すると、特に 入れ子 （nxn、またはそれより悪い場合）で、違いが大きくなることがあります。一種の 内部で実行する計算 /これらの要素：
ng-show ：これらのオプション要素が頻繁に存在する（密集している）場合、特にそれらのコンテンツが安価である場合（特にちょうどその場合）、それらを準備して表示/非表示にする方が速いかもしれません。プレーンテキスト、計算またはロードするものはありません）。これはDOMを隠し要素で埋めるのでメモリを消費しますが、すでに存在しているものを単に表示/隠すことはブラウザにとって安価な操作になるでしょう。
ng-if ：反対に要素が表示されない（スパース）場合は、それらをリアルタイムで構築して破棄してください。特に、コンテンツの取得に費用がかかる場合（計算/ソート/フィルタ処理、画像、生成）画像）。これはまれな、または「オンデマンド」の要素には理想的です。DOMをいっぱいにしないという点でメモリを節約しますが、大量の計算（要素の作成/破棄）と帯域幅（リモートコンテンツの取得）がかかります。また、ビュー内での計算量（フィルタリング/並べ替え）とモデル内の計算量（並べ替え前/フィルタリング前のデータ）によっても異なります。
重要な注意点が1つあります。
ngIfは（ngShowとは異なり）通常、予期しない結果を引き起こす可能性がある子スコープを作成します。
私はこれに関連した問題を抱えていました、そして私は何が起こっているのかを把握するためにかなりの時間を費やしました。
（私の指令はそのモデルの値を間違った範囲に書いていました。）
ですから、髪の毛を節約するには、ゆっくりと動かない限り、ngShowを使用してください。
パフォーマンスの違いはとにかく目立つことはほとんどなく、私は誰が好むのかはまだわからないのですがテストなしでそれが...
ng-show or ng-hideを使用した場合、コンテンツ（サーバーからのサムネイルなど）はexpressionの値に関係なく読み込まれますが、expressionの値に基づいて表示されます。
ng-ifを使用すると、ng-ifの式が真と評価された場合にのみコンテンツがロードされます。
Ng-ifを使用することは、サーバーからデータや画像をロードし、それらがユーザーとの対話によってのみ表示されるような状況では良い考えです。こうすればあなたのページの負荷は不必要なnw集中的な仕事によって妨げられない。
ng-includeとng-controllerはng-includeに大きな影響を及ぼします。フラグがng-controllerでtrueの場合を除き、必要なパーシャルをロードしないで処理しません。 trueですが、問題はngでフラグがfalseになったときです。フラグがtrueに戻ったときにDOMから削除されます。この場合はng-showが優れています。