Question

使用Angular指令，我正在尝试创建一个垂直可扩展的textarea，其行数与文本中'\ n'个字符的行数相同。

（注意，我知道这不适用于包装线 - 我会单独处理这个。）

app.directive('textExpand', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {

      RecalculateLines();

      function RecalculateLines() {
        scope.textEntry = "line1\nline2\n\nline3";
        angular.element(elem).attr("rows", (scope.textEntry).split("\n").length);
      }

      elem.on('keydown', function(event) {

        RecalculateLines();

      });
    }
  };
});

我的想法是我有一个函数来不断重新计算换行符的数量，并使用angular的jqLite动态更新行数来设置属性。我在开始时调用该函数一次（显示任何预先存在的值），然后在每次击键时调用一次。

See plunk here.

加载硬编码值时，

(scope.textEntry).split("\n").length会被正确计算，并在输入框中时更新。但是，使用.attr（）设置它似乎只对初始调用有效，而不是按键。

如果传递另一个数字.attr()似乎工作得很好，那么更奇怪的是。请参阅插件中注释掉的代码，其中每个按键都会根据计数器进行扩展和收缩。

我错过了什么？

Answer 1

您正在重置正在检查它的字符串中的范围变量，将其移出函数并添加ng-trim="false"来解决问题。

http://plnkr.co/edit/W0g1PupXYTUgiNLK1D8M?p=preview

  function RecalculateLines() {
    angular.element(elem).attr("rows", (scope.textEntry).split(/\r?\n/g).length);
    // angular.element(elem).attr("rows", rowCount);
  }

AngularJS - 可扩展的textarea

1 个答案: