Question

我在这里有一点问题。

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

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

以下是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 bug或者只是一个CSS问题？

提前致谢！

Answer 1

这是一个正式的Bug，修复工作即将到来。

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

如果要触发TextArea Autogrow，请使用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

Textarea的高度不会随着预填充文本而改变

1 个答案: