Как динамически изменять высоту textarea в директиве AngularJS?

Question

[IvanKalinin]

Всем доброго.
Подскажите пожалуйста, как с помощью AngularJS динамически изменять высоту textarea в зависимости от контента.
Сделал такую директиву:

.directive('textareaHeight', [
        function () {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function postLink(scope, element, attrs, ngModel) {
                    element.bind('input propertychange', function () {
                        
                        if (angular.element(element[0]).height() < element[0].scrollHeight) {
                            angular.element(element[0]).css('height', element[0].scrollHeight + 2).css('transition', 'height 200ms ease')
                        }
                    });
                }
            };
        }]);

Все красиво, но работает только на увеличение высоты. Если убрать пару строк - то высота не уменьшится.

Или может есть способ узнать количество переносов строк, чтобы оттуда работать с высотой.

p.s. Не хочется устанавливать сторонние директивы и скрипты. Хотелось бы справиться стандартными средствами AngularJS

Answer 1

[_ _]

Создаете div с такими же стилями текста как у textarea, делаете ему position: absolute, запинываете за пределы экрана. При вводе текста в textarea вставляете этот же текст в этот div, меряете его высоту и соотв. высоту ставите для textarea.

Answer 2

[IvanKalinin]

Спасибо Александр Марченко за наводку. получилась такая директива (не откажусь от комментариев и рекомендаций)

angular.module('myApp')
    .directive('textareaHeight', [
        '$timeout',
        function ($timeout) {
            return {
                restrict: 'EA',
                require: 'ngModel',
                scope: {
                    desc: '=ngModel'
                },
                template: '<textarea textarea-height class="form-control" placeholder="Description" ng-model="desc" style="overflow:hidden;"></textarea>' +
                          '<div class="form-control textarea" style="min-height:26px;height:auto;position:absolute;opacity:0;">{{desc}}</div>',
                link: function postLink(scope, element, attrs, ngModel) {
                    var me = this,
                        textarea = angular.element(element[0]),
                        textareaWidth = textarea.outerWidth(),
                        nextElement = angular.element(element).next();

                    function textareaHeight() {
                        nextElement.css('width', textareaWidth).css('word-wrap', 'break-word');
                        angular.element(element[0]).css('height', nextElement.outerHeight() + 2).css('transition', 'height 200ms ease')
                    }

                    $timeout(function () {
                        textareaHeight();
                    }, 1);

                    element.bind('input propertychange', function () {
                        textareaHeight();
                    });
                }
            };
        }]);

View:

<div class="col-sm-11 col-sm-offset-1 p-tb-sm"> <!-- имена классов актуальны для моего шаблона -->
    <textarea-height ng-model="ControllerName.modelName"></textarea-height>
</div>