css - 无法使用 AngularJS 更改高度

Question

我正在尝试在指令中使用 AngularJS 更改文本区域的高度。我将属性 auto-resize 添加到我的 textarea 并将指令定义为:

app.directive('autoResize',function(){
return {
            restrict: 'A',
            //scope: {},
            replace: false,
            link: function(scope, element, attrs) {
                    element.css({
                        'overflow': 'hidden',
                        'color': 'red',
                        'height': '50px'
                    });
                }

            }
        }

颜色和溢出样式在文本区域上实现，但是文本区域的高度不会达到 50px。

感谢任何帮助。

Answer 1

这个指令可能会做你正在寻找的:)

这是一个显示它工作的codepen:https://codepen.io/benshope/pen/xOPvpm

app.directive('expandingTextarea', function () {
    return {
        restrict: 'A',
        controller: function ($scope, $element, $attrs, $timeout) {
            $element.css('min-height', '0');
            $element.css('resize', 'none');
            $element.css('overflow-y', 'hidden');
            setHeight(0);
            $timeout(setHeightToScrollHeight);

            function setHeight(height) {
                $element.css('height', height + 'px');
                $element.css('max-height', height + 'px');
            }

            function setHeightToScrollHeight() {
                setHeight(0);
                var scrollHeight = angular.element($element)[0]
                  .scrollHeight;
                if (scrollHeight !== undefined) {
                    setHeight(scrollHeight);
                }
            }

            $scope.$watch(function () {
                return angular.element($element)[0].value;
            }, setHeightToScrollHeight);
        }
    };
});