12925


はじめまして。タイトルのとおりです。AngularJSをつかって横方向に自動リサイズするinputのdirectiveをつくっています。inputにテキストが入力され自動でinputが横方向にリサイズされる処理がわかりません。
また合わせて、inputの初期値のテキスト量に応じてページロード時にinputを自動でリサイズさせておきたいです(500pxをmax-
widthにしたいです)。

高さが自動でリサイズされるものは下記が実現できたのですがwidthに置き換えてもうまく動作せずに困っています。よろしくお願いします。

===

resizeInput.coffee

[code]

    mod = angular.module('resizeInput', [])
    mod.directive 'resizeInput', ->
      {
        restrict: 'A'
        require: '?ngModel'
        link: (scope, element, attrs, ngModel) ->
          HEIGHT = 25
          el = angular.element(element[0])
          el.css 'lineHeight', HEIGHT + 'px'
          el.css 'height', HEIGHT + 'px'
    
          resize = (e) ->
            textHeight = e.target.scrollHeight
            height = ~ ~(textHeight / HEIGHT) * HEIGHT
            el.css 'height', height + 'px'
            return
    
          el.on 'input', resize
          scope.$watch attrs.ngModel, (value) ->
            if value == undefined
              return
            textHeight = el[0].scrollHeight
            height = ~ ~(textHeight / HEIGHT) * HEIGHT
            el.css 'height', height + 'px'
            return
          ngModel.$parsers.unshift (viewValue) ->
            viewValue
          return
    
      }
    
[/code]

===

edit.html

[code]

    <input type="text" resize-input ng-model="item.text">
    
[/code]


CC BY-SA 3.0
2015-07-21T05:55:25.183
12520
2015-08-31T17:27:26.463
10441
question
javascript angularjs
横方向に自動リサイズするinputのdirectiveをつくりたい


こういう感じでしょうか。幅計算部分は適当です。

[code]

    angular.module('resizeInput', [])
    .directive('resizeInput', function(){
      return {
        restrict: 'A',
        require: 'ngModel',
        scope: {},
        link: function(scope, elem, attrs, ngModel){
    
          scope.$watch(function(){
            return ngModel.$modelValue;
          }, function(newVal, oldVal){
            if(angular.isDefined(newVal)){
              elem.css('width', calculateWidth(newVal.length));
            }
          });
    
          function calculateWidth(length){
            var minWidth = 150;
            var maxWidth = 500;
            var charWidth = 6;
            var width = length * charWidth;
            return width > maxWidth? maxWidth: width < minWidth? minWidth: width;
          }
        }
      };
    });
    
[/code]


CC BY-SA 3.0
2015-08-01T16:54:54.307
12925
2015-08-01T16:54:54.307
8532
12520
answer