A small, performant way of automatically expanding a textarea in Angular.

angular-textarea-autoresize.js

// Ryan Gonzalez 7/2013
// Adapted from the blog post 
// http://phaistonian.pblogs.gr/expanding-textareas-the-easy-and-clean-way.html

angular.module('autoresize', []);

angular.module('autoresize')
  .directive('autoresize', function($window){
    'use strict';
    return  {
      restrict: 'A',
      link:  function (scope, element, attrs) {
        var offset = !$window.opera ? (element[0].offsetHeight - element[0].clientHeight) : (element[0].offsetHeight + parseInt($window.getComputedStyle(element[0], null).getPropertyValue('border-top-width'))) ;

        var resize  = function(el) {
            el.style.height = 'auto';
            el.style.height = (el.scrollHeight  + offset ) + 'px';    
        }
     
        element.bind('input', function() { resize(element[0]); });
        element.bind('keyup', function() { resize(element[0]); });
      }
    }
  });

This is working for me, but it doesn't fire when the textarea value is set automatically. Calling resize(element[0]) at the end of the link function doesn't do this.

Easy workaround is to bind click to resize as well. This will cause the expansion on click, which isn't a terrible workaround. So the last 2 lines can be replaced with:

        element.bind('input keyup click', function do_resize(){
            resize(element[0]);
        });