Directive example in AngularJS 1.3

by vishalvasani

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div ng-app="myApp">
    <auto-expand></auto-expand>
</div>

CSS

.autoexpand-textarea-container {
    position: relative;
    width: 50%;
  }

  .autoexpand-textarea, .autoexpand-textarea-size {
    min-height: 25px;
    font-family: sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    padding: 4px;
    border: 1px solid;
    overflow: hidden;
    width: 100%;
  }

  .autoexpand-textarea {
    height: 100%;
    position: absolute;
    resize:none;
    white-space: normal;
  }

  .autoexpand-textarea-size {
    visibility: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('autoExand', function() {
    return {
    		restrict: 'A',
        template: '<div class="autoexpand-textarea-container"><textarea class="autoexpand-textarea"></textarea><div class="autoexpand-textarea-size"></div></div>'
    }
   
});