AngularJS - расширяемая текстовая область

Question

AngularJS - расширяемая текстовая область

0

Используя угловую директиву, я пытаюсь создать вертикально расширяемую текстовую область, которая имеет такое же количество строк, что и число символов "\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();

      });
    }
  };
});

Идея состоит в том, что у меня есть функция для постоянного пересчета количества разрывов строк и динамического обновления количества строк с помощью углового jqLite для установки атрибута. Я вызываю эту функцию один раз в начале (для отображения любых ранее существующих значений), а затем один раз при каждом нажатии клавиши.

Смотрите здесь.

(scope.textEntry).split("\n").length правильно подсчитывается при загрузке жестко заданного значения и обновляется при вводе в поле. Однако установка его с использованием.attr(), похоже, работает только на начальный вызов, а не на нажатия клавиш.

Что странно, что .attr() похоже, отлично работает, передавая ему другое число. См. Код с комментариями в панели, где поле расширяется и сжимается штрафом на основе счетчика на каждое нажатие клавиши.

Что мне не хватает?

Boris 21 авг. 2015, в 18:21

Источник

Теги:

javascript

angularjs

angularjs-directive

1 ответ

Ещё вопросы

shaunhusain · Accepted Answer · 2015-08-21T14-23-00.000Z

Вы сбросили переменную области видимости в строке, которая проверяла ее, переместив ее из функции и добавив 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);
  }

Вставка и перетаскивание не вызывают нажатия клавиш. Вы можете рассмотреть возможность использования ngModel. $ ViewChangeListener.push (RecalculateLines) вместо этого.
... знал, что это то, что я должен был заметить> _> спасибо за помощь! @PetrAveryanov, я думал о том, чтобы иметь отдельный обработчик для события вставки, но также рассмотрю то, что вы предложили.