Angular JS在textarea中显示最后几行

Angular JS showing last few lines in textarea

本文关键字：几行 最后 显示 JS textarea Angular      更新时间：2023-09-26

我有一个textarea，默认情况下它显示从头开始的内容。我想让它默认显示结束内容，如果你向上滚动，它应该在顶部显示内容。

我怎样才能做到这一点?

从控制器操作DOM通常被认为是不好的做法。我认为最好的方法是创建一个指令来监视文本区域的值，并让它处理DOM操作。

angular.module('directivesModule').directive('showTail', function () {
    return function (scope, elem, attr) {
        scope.$watch(function () {
            return elem[0].value;
        },
        function (e) {
            elem[0].scrollTop = elem[0].scrollHeight;
        });
    }
});

然后只需将指令添加到文本区域

<textarea show-tail></textarea>

你可以使用npm或wer安装angular-scroll-glue。

然后在你的模块依赖中添加'luegg. '指令’(见链接)。

和添加指令到你的textarea:

<textarea scroll-glue></textarea>

参见问题如何将文本区滚动条默认设置为底部?

这不是angularjs特有的，你只需要在你的控制器中添加:

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
相关文章：