[Angular.js]縦方向だけ自動リサイズしてくれるtextareaのdirective

Slackのようなチャットサービスに使われる、文字が増えると縦方向に自動リサイズしてくれるtextareaのdirective。

resizeTextarea.js

app.directive('resizeTextarea', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    template: "<textarea placeholder='入力してください'></textarea>",
    link: function(scope, element, attrs) {
      var HEIGHT = 25;
      var el = angular.element(element[0])
      el.css('lineHeight', HEIGHT + "px");
      el.css('height', HEIGHT + "px");

      var resize = function(e) {
        var textHeight = e.target.scrollHeight;
        var height = ~~(textHeight / HEIGHT) * HEIGHT
        el.css('height', height + "px");
      };
      el.on('input', resize);
    }
  }
});

使い方

repalceをtrueにしているので以下のように書くと自動でtextareaに置換してくれる。

index.html

<div>
    <resize-textarea></resize-textarea>
</div>