Angular: Auto Height

http://angularjs.org/

by Freewind

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<html ng-app="myapp">
  <body ng-controller="Controller">
      <textarea auto-height ng-model="xxx"></textarea>
      [{{xxx}}]
  </body>

</html>

CSS

textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: lightgray;
    height: 200px;
}

JavaScript

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

myapp.directive("autoHeight", function() {
    return function(scope, element, attrs) {
        scope.$watch(attrs.ngModel, function(v) {
            var height = element[0].scrollHeight;
            console.log(height);
            element.css("height", height+'px');
        });
   }
});
function Controller($scope) {
    $scope.xxx = "hello";
}