仅在横向模式下应用布局填充 Angular 材质

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>

然后您可以监听方向更改事件并相应地切换您的布尔值。