[긁어다 쓰는 소스] AngularJS에서 textarea 사용시 width 및 height 설정

angularjs에서 textarea 태그 사용시 브라우저에 따른 width 고정 : (1) CSS 

angularjs에서 textarea 태그 사용시 height 자동 변경 : (2) directive

------------------------------------------------------------------------------

(1) CSS : 선택해서 사용

.textarea-transparent {

position: relative;

width: 100%;

border:0;

background-color: transparent;

}

.textarea-ellipsis {

position: relative;

width: 100%;

border:0;

background-color: transparent;

-ms-overflow-style: none;

text-overflow: ellipsis;

display: -webkit-box;

/* -webkit-line-clamp: 5; number of lines */

-webkit-box-orient: vertical;

word-wrap:break-word;

/* line-height: 1.2em; */

/*height: 6.0em;*/ 

      /* This is used for non-webkit browsers. --> line-height = 1.2em, */

      /* it cut 3 lines and then, height will be 1.2em * 3 = 3.6em */

}

------------------------------------------------------------------------------

(2) directive

angular.module('app').directive('elastic', [

    '$timeout',

    function($timeout) {

        return {

            restrict: 'A',

            link: function($scope, element) {

                $scope.initialHeight = $scope.initialHeight || element[0].style.height;

                var resize = function() {

                    element[0].style.height = $scope.initialHeight;

                    element[0].style.height = "" + element[0].scrollHeight + "px";

                };

                element.on("input change", resize);

                $timeout(resize, 0);

            }

        };

    }

]);

------------------------------------------------------------------------------

(3) HTML text area 태그

<textarea class="textarea-ellipsis"

          elastic 

          data-ng-model="variable.modelList.NOTE]"                                                    

          data-ng-trim="true"></textarea>

------------------------------------------------------------------------------