Auto growing textarea in ionic

I found a much more better way to do this without using any other third party library or directive.

$scope.updateEditor = function() {
    var element = document.getElementById("page_content");
    element.style.height = element.scrollHeight + "px";
};

Then simply adding ng-keypress="updateEditor()" to the textarea would do the job.

<textarea ng-keypress="updateEditor()" ng-model="bar"> </textarea>

I Hope this helps others who might face this problem in the future.

Update: Here is a codepen for this: http://codepen.io/kpourdeilami/pen/KDepk

Update 2: Use the snippet provided by @benshope

The answer above does not shrink - here is an improved version:

angular.module('app').directive('textarea', function() {
  return {
    restrict: 'E',
    controller: function($scope, $element) {
      $element.css('overflow-y','hidden');
      $element.css('resize','none');
      resetHeight();
      adjustHeight();

      function resetHeight() {
        $element.css('height', 0 + 'px');
      }

      function adjustHeight() {
        var height = angular.element($element)[0]
          .scrollHeight + 1;
        $element.css('height', height + 'px');
        $element.css('max-height', height + 'px');
      }

      function keyPress(event) {
        // this handles backspace and delete
        if (_.contains([8, 46], event.keyCode)) {
          resetHeight();
        }
        adjustHeight();
      }

      $element.bind('keyup change blur', keyPress);

    }
  };
});

This will transform all your textareas to grow/shrink. If you want only specific textareas to grow/shrink - change the top part to read like this:

angular.module('app').directive('expandingTextarea', function() {
  return {
    restrict: 'A',

Hope that helps!

Try Angular-Elastic. It is an angular directive built to auto-expand a textarea. Use bower to install it.

bower install angular-elastic

add it to your project, then you can use it as an attribute

<textarea msd-elastic ng-model="foo"> </textarea>

or as class

<textarea class="msd-elastic" ng-model="bar"> </textarea>

Do you mean vertically auto-growing? I tried this:

  <textarea ng-model='doc.description'
   rows='{{doc.description.length/50 + 1}}' 
   cols='50'></textarea>

Kinda hackish, but after having determined an expected column length, lets define the row length based on the length of the inputed text. It starts growing vertically when I start typing! (no scrolling/out of view text).