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>