AngularJS <input> 输入框自适应内容宽度

在Gist上找到的一个directive，用来让input输入框的宽度自适应内容宽度。
https://gist.github.com/mbenford/8016984

原理是生成一个相同样式的，隐藏的span，通过span的宽度动态改变input的宽度。
同时兼顾了input有placeholder的情况。

如果是在比较大的系统中，可以用throttle节流阀包装一下resize方法，避免性能问题。

如果是textarea，对应的directive在这里：
https://github.com/monospaced/angular-elastic

效果：

See the Pen input auto size directive by iMaeGoo (@iMaeGoo) on CodePen.

HTML

<div ng-app="Test" ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <input type="text" ng-model="name" placeholder="type here" autosize/>
</div>

JS

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

app.controller('MainCtrl', function ($scope) {
  $scope.name = '';
});

app.directive('autosize', function ($document) {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
      var span;

      span = angular.element('<span></span>');
      span.css('display', 'none')
        .css('width', 'auto');

      element.parent().append(span);

      function resize(value) {
        var style = getComputedStyle(element[0]);
        span.css('font', style.font)
          .css('letter-spacing', style.letterSpacing)
          .css('word-spacing', style.wordSpacing)
          .css('padding', style.padding);

        if (value != null && value.length === 0) {
          value = element.attr('placeholder') || '';
        }
        span.text(value);
        span.css('display', '');
        try {
          element.css('width', span.prop('offsetWidth') + 'px');
        }
        finally {
          span.css('display', 'none');
        }
      };

      ctrl.$parsers.unshift(function (value) {
        resize(value);
        return value;
      });

      ctrl.$formatters.unshift(function (value) {
        resize(value);
        return value;
      });
    }
  };
});