Question

我试图在指令中使用AngularJS更改textarea的高度。我向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'
                    });
                }

            }
        }

颜色和溢出样式在textarea上实现，但文本区域的高度不会达到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);
        }
    };
});

Answer 2

你应该在textarea上设置rows属性，而不是通过css更改高度。

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

            }
        }

http://www.w3schools.com/tags/att_textarea_rows.asp

Answer 3

您必须使用'style'来处理DOM级别的css属性，而不是'css（）'。使用jQuery时可以使用'.css（）'方法。在你的指令中试试这个。

element.style.height = '50px';
element.style.overflow = 'hidden';
element.style.color = 'red';

参见参考here

使用AngularJS无法改变高度

3 个答案: