angularjs - 文本区域高度不会随预填充文本而改变

Question

我这里有一个小问题。

我正在开发一个项目，需要在用户单击号召性用语后显示表单。到目前为止一切都很好。

问题在于，当用户单击按钮显示表单时，文本区域不会根据文本调整高度，并且看起来不完整，直到用户聚焦文本区域并移动箭头键。

这里是Codepen中的代码和示例

<div ng-app="test">
  <div class="holder" ng-controller="MainCtrl" layout="row" layout-align="center center">
    <div class="blocker" ng-show="blocked">
      <md-button class="md-raised md-warn" ng-click="toggle()">See me</md-button>
    </div>
    <div class="form" ng-hide="blocked">
      <form name="myForm">
        <md-input-container flex>
            <label>How are you</label>
            <textarea ng-model="answer1" name='answer1'></textarea>
        </md-input-container>  
      </form>
    </div>
  </div>
</div>

以及 Javascript 部分

var app = angular.module('test', ['ngMaterial']);

app.controller( 'MainCtrl', function($scope){
  $scope.answer1 = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,";
  $scope.blocked = true;
  $scope.toggle = function(){
    $scope.blocked = !$scope.blocked;
  }
});

http://codepen.io/Tmeister/pen/wajdgE

也许是 Angular Material 错误或者只是 CSS 问题？

提前致谢!

Answer 1

这是一个官方错误，修复即将到来。

https://github.com/angular/material/commit/5fdcf905b4355c0385a02f59d2875b93e7a18ce4

如果你想触发 TextArea 自动增长，请使用 ng-if 而不是 ng-hide/ng-show

<div ng-app="test">
  <div class="holder" ng-controller="MainCtrl" layout="row" layout-align="center center">
    <div class="blocker" ng-show="blocked">
      <md-button class="md-raised md-warn" ng-click="toggle()">See me</md-button>
    </div>
    <div class="form" ng-if="!blocked">
      <form name="myForm">
        <md-input-container flex>
          <label>How are you</label>
          <textarea ng-model="answer1" name='answer1'></textarea>
        </md-input-container>
      </form>
    </div>
  </div>
</div>

工作示例:http://codepen.io/Tmeister/pen/EjLXYm