縦方向に自動リサイズするtextareaのdirectiveをつくりたい

Question

はじめまして。タイトルのとおりです。AngularJSをつかって縦方向に自動リサイズするtextareaのdirectiveをつくっています。textareaにテキストが入力され２行目になると自動でtextareaが縦方向にリサイズされるところまでは実現できたのですが、これをページロード時に実行させるところが上手くいきません。

textareaの初期値が空だとこのコードで大丈夫なのですが、初期値に100文字程度のテキストが格納される前提で、初期値のテキスト量に応じてページロード時にtextareaを自動でリサイズさせておきたいです。よろしくお願いします。

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

Comments

[aoshima.natsuki]

さっそくのご回答ありがとうございます！！！なるほど、すごく勉強になります。少し微調整することで想定していた仕様にすることができました！ご丁寧にありがとうございました