Angular JS在textarea中显示最后几行

Question

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

我怎样才能做到这一点？

Answer 1

从控制器操作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>

Answer 2

您可以使用npm或bower安装angular-scroll-glue。

然后在您的模块依赖项中添加＆＃39; luegg.directives＆＃39; （见链接）。

并将指令添加到textarea：

<textarea scroll-glue></textarea>

Answer 3

请参阅问题How do I set textarea scroll bar to bottom as a default?

基本上这不是angularjs特定的，你只需添加你的控制器：

var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;