高さが自動で可変できるテキストエリアでページ読み込み時にリサイズさせるdirectiveをつくりたい

Question

はじめまして。最近AngularJSをはじめました。
高さが自動で可変できるdirectiveをつくっているのですが、ページ読み込み時にセットされた文字列の高さに合わせてリサイズができずに悩んでします（改行することで自動で高さが変わるようにはなっていますがその先がわかりません）。

イメージとしてはこちら http://monospaced.github.io/angular-elastic/ のようなものを想定しています。よろしくお願いします。

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);
    }
  }
});

Answer 1

微調整は必要かもしれませんが、下記でいけると思います。

<textarea name="inputModel" resize-textarea ng-model="inputModel"></textarea>>

app.directive("resizeTextarea", function() {
	return {
		restrict : 'A',
		require : '?ngModel',
		link : function(scope, element, attrs, ngModel) {
			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);
			
			scope.$watch(attrs.ngModel, function (value) {
				if (value == undefined) {
					return;
				}
				var textHeight = el[0].scrollHeight;
				var height = ~~(textHeight / HEIGHT) * HEIGHT
				el.css('height', height + "px");
            });
			
			ngModel.$parsers.unshift(function(viewValue) {
				return viewValue;
			});
		}
	};
});