[memo] AngularJs ng-if, ng-show, ng-switchのDOMからの追加・削除とCSSでの表示・非表示について

開発してて、当たり前の事をたまにふと忘れてしまいそうになるのでメモ。

テスト

　　　<div>
    <input type="checkbox" name="test" ng-model="testModel">
    <div ng-if="testModel">IfTrue</div>
    <div ng-if="!testModel">IfFalse</div>
    <div ng-show="testModel">showTrue</div>
    <div ng-show="!testModel">showFalse</div>
    <div ng-switch="testModel">
      <div ng-switch-when="true">switchTrue</div>
      <div ng-switch-when="false">switchFalse</div>
      <div ng-switch-default>switchDefault</div>
    </div>
  </div>

よく使うディレクティブを使ってテスト的なコードを使って、どれがDOMから削除され、どれがCSSで見かけ上消えるだけなのかを、簡単なテストコードで確認。

結果

• ng-if と ng-switch がDOMから追加と削除
• ng-showがCSSで制御

ついでに

DOMからの追加・削除とCSSでの表示・非表示の気をつけることもメモ

DOMからの追加・削除

CSSのリストなどで:first-childをする場合、影響を受ける段落が変わってしまい、レイアウトが崩れてしまう。

CSSでの表示・非表示

閲覧者に隠れてる部分が見えてしまう為、条件に応じて見られたらまずいものを扱う場合は危険

最後に

開発後半で全てのコードのng-if・ng-if・ng-switch ..etc
をチェックするのはかなり手間と、再デバッグが必要になるので気をつけて開発していきたい。