Javascript 如何计算动态表单中文本区域的高度

我有一个通过指令动态加载的表单

表单包括几个选项卡和几个手风琴

在协议中，Textarea已经加载了表单的内容

我想文本区域的高度将根据其足够的内容自动计算

我恢复了一个解决方案，允许我计算文本区域的正确高度。不幸的是，它只在第一个选项卡上计算

如果我更改选项卡，当有大量内容时，高度保持为0

这个问题有解决办法吗

我想在tab change中使用$watch（）来重新启动函数rezise

以下是表单的html代码：

<form name="formData" method="post" enctype="multipart/form-data" novalidate data-html-validation>
<tabset class="tabset">
    <tab ng-repeat="data in ctrl.dataMap" heading="{{data.label}}" disabled="{{!data.sections.length}}" select="ctrl.alertMe($event)">
        <tab-heading>
            <div class="wrapper">
                {{data.label}}
               <span class="text" ng-if="data.notification!=undefined"> {{data.notification}}</span>
            </div>
        </tab-heading>
        <accordion close-others="false" class="ctnAccordion">
            <accordion-group heading="{{group.label}}" is-open="true" ng-repeat="group in data.sections">
                <div class="col-lg-12" ng-repeat="line in group.fields" >
                    <div class="form-group row">
                        <label class="col-lg-4">{{line.name}}</label>
                        <div ng-switch="line.type">
                            <div class="col-lg-8" ng-switch-when='ALPHANUM'>
                                <textarea elastic class="form-control" maxlength="255" ng-model="line.value" rows="1" cols="20" wrap="hard"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </accordion-group>
        </accordion>
    </tab>
</tabset>

---

选项卡可能通过将

display:none

应用于非活动选项卡来工作。不能确定具有此样式的任何图元或其任何子体的尺寸。您需要在单个选项卡第一次可见后执行此操作。@misorude，我还认为问题在于该选项卡未处于活动状态，事实上它应该检测到指令中的选项卡更改

directives.directive('elastic', [
'$timeout',
function($timeout) {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            $scope.initialHeight = $scope.initialHeight || element[0].style.height;
            var resize = function() {
                element[0].style.height = $scope.initialHeight;
                element[0].style.height = "" + element[0].scrollHeight + "px";
            };

            element.on("blur keyup change", resize);
            $timeout(resize, 0);
            $scope.$watch(attrs.ngModel, resize);
        }
    };
 }
]);