Angularjs - TextArea autogrow

Question

このプロジェクトではdirectiveを使用しますが、コンテンツがロードされる瞬間にテキスト領域を拡張したいと考えています。

角度-Autogrow.js：

// $element[0].addEventListener('input', $scope.autogrowFn); 

    $element[0].addEventListener('load', $scope.autogrowFn);//<-- I add this line 

が、それはうまくいきませんでした：

(function(){ 
    'use strict'; 
    angular.module('angular-autogrow', []).directive('autogrow', ['$window', function($window){ 
     return { 
      link: function($scope, $element, $attrs){ 

       /** 
       * Default settings 
       */ 
       $scope.attrs = { 
        rows: 1, 
        maxLines: 999 
       }; 

       /** 
       * Merge defaults with user preferences 
       */ 
       for(var i in $scope.attrs){ 
        if($attrs[i]){ 
         $scope.attrs[i] = parseInt($attrs[i]); 
        } 
       } 

       /** 
       * Calculates the vertical padding of the element 
       * @returns {number} 
       */ 
       $scope.getOffset = function(){ 
        var style = $window.getComputedStyle($element[0], null), 
         props = ['paddingTop', 'paddingBottom'], 
         offset = 0; 

        for(var i=0; i<props.length; i++){ 
         offset += parseInt(style[props[i]]); 
        } 
        return offset; 
       }; 

       /** 
       * Sets textarea height as exact height of content 
       * @returns {boolean} 
       */ 
       $scope.autogrowFn = function(){ 
        var newHeight = 0, hasGrown = false; 
        if(($element[0].scrollHeight - $scope.offset) > $scope.maxAllowedHeight){ 
         $element[0].style.overflowY = 'scroll'; 
         newHeight = $scope.maxAllowedHeight; 
        } 
        else { 
         $element[0].style.overflowY = 'hidden'; 
         $element[0].style.height = 'auto'; 
         newHeight = $element[0].scrollHeight - $scope.offset; 
         hasGrown = true; 
        } 
        $element[0].style.height = newHeight + 'px'; 
        return hasGrown; 
       }; 

       $scope.offset = $scope.getOffset(); 
       $scope.lineHeight = ($element[0].scrollHeight/$scope.attrs.rows) - ($scope.offset/$scope.attrs.rows); 
       $scope.maxAllowedHeight = ($scope.lineHeight * $scope.attrs.maxLines) - $scope.offset; 

       $element[0].addEventListener('input', $scope.autogrowFn); 
       /** 
       * Auto-resize when there's content on page load 
       */ 
       if($element[0].value != ''){ 
        $scope.autogrowFn(); 
       } 
      } 
     } 
    }]); 
})(); 

私が変更されます。コンテンツの読み込み時にテキスト領域が自動的に拡大するように変更するにはどうすればよいですか？

Answer 1

こんにちはuは「の角度-自動拡張」incldueまずapp.jsでディレクティブをディレクティブを使用する必要があり、その後、テキストエリアをチェックし、自動であなたに基づいて成長します

HTMLを入力

<textarea autogrow></textarea> 

JS

var app = angular.module('plunker', ["angular-autogrow"]); 

app.controller('MainCtrl', function($scope) { 

}); 

<textarea autogrow ng-model="vm.myinput" ></textarea> 

私が交換：

$element[0].addEventListener('input', $scope.autogrowFn); 

をして：

$scope.$watch($attrs.ngModel, $scope.autogrowFn); 

ので、モデルが変更されるたびに、自動拡張機能がある参照https://plnkr.co/edit/kj3ikS30cqVIRofTU22X?p=preview

Answer 2

私のHTMLがあるためと呼ばれる。これはあなたの場合でも有効です。