ランドスケープモードでレイアウト塗りを適用する角材

Question

私はmdコンテンツの中に2つのdivを持っています。最初のdivのレイアウト塗りをランドスケープモードでのみ適用したいと思います。それを処理する方法はありますか？

<md-content layout-fill layout="column" flex > 
     <div flex="45" id="c1" layout layout-align="center center"> 
     <div> 
      <img src="http://www.hdicon.com/wp-content/uploads/2014/07/visa_2014-100x100.png" width="100" height="100"><br> 
      <span>Label</span> 
     </div> 
     </div> 
     <div flex="55" id="c2" layout layout-align="center center"> 
     <div> 
      <md-input-container class="md-block"> 
      <label>First name</label> 
      <input name="name" ng-model="user.name" required>        
      </md-input-container> 
     </div> 
     </div>  
    </md-content> 

http://codepen.io/ankamsarav/pen/KzrPNX

Answer 1

私は条件付きでこのディレクティブを適用する方法を知りません。これを回避するには、代わりに2つの<md-content></md-content>ディレクティブを使用し、ng-ifを使用して、一度に1つだけDOMにレンダリングされるようにそれらを切り替えることができます。

<md-content layout-fill ng-if="landscapeBoolean">...</md-content> 
<md-content ng-if="!landscapeBoolean">...</md-content> 

次に、方向変更イベントをリッスンし、それに応じてブール値を切り替えることができます。