Question

在我的指令中需要一些帮助来扩展<textarea>元素，以便在用户输入字段时显示文字。

这个想法很简单。 <textarea>元素看起来就像常规<input>元素，直到逻辑确定文本没有足够的空间并通过添加到高度来扩展它。

我遇到一个问题，当ng-show或ng-if隐藏的元素根据某些逻辑向用户显示<textarea>元素时，其显示的高度不正确。

是否可以确定元素是否尚未展开并重新运行元素上的指令？

指令

.directive('lwAutoExpand', function ($window) {
    var LinkFn = function (scope, element, attr, ngModel) {
        element.css("overflow", "hidden");
        element.context.style.height = parseInt(element.css("line-height").replace("px", ""), 10) + parseInt(element.css("padding-top").replace("px", ""), 10) + parseInt(element.css("padding-bottom").replace("px", ""), 10) + "px";

        scope.$watch(function () { return ngModel.$modelValue; }, function (value) {
            if (element.context.scrollHeight > parseInt(element.context.style.height.replace("px", ""), 10)) {
                element.context.style.height = element.context.scrollHeight + "px";
            }
        });

        angular.element($window).on("resize", function () {
            if (element.context.scrollHeight > parseInt(element.context.style.height.replace("px", ""), 10)) {
                element.context.style.height = element.context.scrollHeight + "px";
            }
        });
    };

    return {
        require: 'ngModel',
        link: LinkFn,
    };
})

HTML

<textarea placeholder="please type something into the field"
          ng-model="user_text"
          ng-if="display_element_based_on_another_elements_value"
          lw-auto-expand></textarea>

如果某人有更好的方法来实施相同的指令，请不要犹豫，告诉我它应该如何完成。

我正在使用AngularJs 1.5.8

自动扩展textarea（AngularJs指令）

0 个答案: