Angular JS 在 textarea 中显示最后几行

Posted 2023-05-07

【中文标题】Angular JS 在 textarea 中显示最后几行

【英文标题】：Angular JS showing last few lines in textarea

【发布时间】：2014-04-17 23:55:58

【问题描述】：

我有一个文本区域，默认情况下它从头开始显示内容。我想让它默认显示最终内容，如果你向上滚动它应该在顶部显示内容。

我怎样才能做到这一点？

【参考方案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>

【讨论】：

我收到一个错误：$injector:nomod Module Unavailable。当我将module('directivesModule') 更改为module('directivesModule',[]) 时，错误不在我的控制台中，但滚动仍然无法正常工作。可能这个例子是针对旧版本的 Angular 的？

【参考方案2】：

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

然后在您的模块依赖项中添加“luegg.directives”（参见链接）。

并将指令添加到您的文本区域：

<textarea scroll-glue></textarea>

【参考方案3】：

见问题How do I set textarea scroll bar to bottom as a default?

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

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

【讨论】：

正如@Mike De Swert 提到的，任何类型的 DOM 操作都应该在指令中处理。这就是 Angular 的做法（ng-repeat、ng-cloak 等），这也是我们通常被鼓励这样做的方式。