Subscribed unsubscribe Subscribe Subscribe

@peccul is peccu

(love peccu '(emacs lisp cat outdoor bicycle mac linux coffee))

AngularJSでng-includeするとデザインが崩れた

デザイナさんがCSSセレクタに+記号(隣接)を利用していて、ちょうどその境目でビューを分割していたのでデザインが崩れた。

ng-includeだとタグが増えるのでセレクタを調整する必要がある。

  • デザイナさん作成のcss
.hoge + p{
  display: none;
}
  • デザイナさん作成のhtml
<div class="hoge">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel turpis a justo egestas mollis vitae eu enim. Nulla sagittis hendrerit nulla, vel hendrerit lectus facilisis ut.
</div>
<p>
  Sed sed euismod dolor, at efficitur enim. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
  • 分割したhtml
<ng-include src="'lorem.html'"></ng-include>
<p>
  Sed sed euismod dolor, at efficitur enim. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
  • 生成されたDOM

これではスタイルが適用されない。pタグにクラス指定するなどで対応が必要。

<ng-include src="'lorem.html'">
  <div class="hoge">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel turpis a justo egestas mollis vitae eu enim. Nulla sagittis hendrerit nulla, vel hendrerit lectus facilisis ut.
  </div>
</ng-include>
<p>
  Sed sed euismod dolor, at efficitur enim. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>