在angularJS中调整textarea的大小（在uib-tab内部）

Question

Hi I m using https://hassantariqblog.wordpress.com/2016/07/27/angularjs-textarea-auto-resize-directive/ in AngularJS to resize text area based on input. And I am using template like below(description.tpl.html):

 <textarea class="form-control" auto-resize placeholder="Please enter description here..." style="resize: none;min-height:100px;" ng-model="description" autofocus></textarea>  

And I display the text area in 2 places. However, the size of textarea is not updated when I use it inside a tab like below. However, when I start typing in the textarea,it updates the size.

 <uib-tab heading= DESCRIPTION >                      
     <div ng-include="'description.tpl.html'"></div>
 </uib-tab>

So I tried to add this code, when the tab is selected, how can I call the directive?

element.css({ 'height': 'auto', 'overflow-y': 'hidden' });
element.css('height', element[0].scrollHeight + 'px');

Thanks in advance!

Answer 1

I added a boolean scope variable and set it to true when the tab is selected. Added the following code to the directive:

     scope.$watch('descriptionTabSelected', function(descriptionTabSelected){
                    if(descriptionTabSelected){
                        element.css({ 'height': 'auto', 'overflow-y': 'hidden' });
                        $timeout(function () {
                            element.css('height', element[0].scrollHeight + 'px');
                        }, 100);
                    }
                });