仅在横向模式角度材质中应用布局填充

Question

我在md-content中有两个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

我不知道有条件地应用此指令的方法。要解决此问题，您可以使用两个<md-content></md-content>指令并使用ng-if来切换它们，以便一次只将一个呈现到DOM中。

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

然后你可以听取方向改变事件并相应地切换你的布尔值。