should this component still work?

[akcasoy]

I have created a new app with the angular fullstack generator, and tried to use this component, but does not work at all.

[evyros]

Yes, it should. Can you provide more details (angular version for example)? Thanks.

[erperejildo]

I just tried it and works. Did you tried in a simple textarea? I did and works but I tried in textareas generated dynamically in a ng-repeat and doesn't work. https://dl2.pushbulletusercontent.com/InnTDKJMTpahq7J5Fw93W3Wgc3PCmlPc/Screenshot_2016-06-21-15-56-54.png (the red one is the normal textarea)

[evyros]

hmm...interesting, probably the render should be push with $timeout. I'll try to reproduce this bug and come back with a fix.

[erperejildo]

Besides the content comes from a model. The block of that example is this one:

<li class="step" ng-repeat="step in photo.receipeStepsTemp">
                    <div><span class="step-number abs">{{$index+1}}</span></div>
                    <textarea id="instructions" placeholder="Write instructions..." ng-model="step.text" autogrow></textarea>
                    <div id="add-photo">
                        Add photo
                    </div>
                </li>

[Mike120Git]

HI CodingAspect! I just had a problem with initial resize (textarea value is initialized from ng-model). When the code in link function executes, the $element[0].value is not set yet. Here is my fix:

            //if($element[0].value != ''){
                //$scope.autogrowFn();
            //}

            $timeout(function(){
              $scope.autogrowFn();
            });

And you could add: $window.addEventListener('resize', adjustHeight, false); to handle browser window resize event.

I needed as simple as possible directive to do the job, but I couldn't find anything sensible... And your code / idea is great, so I borrowed it... :-] Thanks!

Here is my directive - I think there is no need to put everything on the $scope. I am not sure, if addEventListener code is called only once.

(function(){ 'use strict'; angular.module('angular-adjustheight', []) .directive('adjustheight', ['$window', '$timeout', function($window, $timeout){ var getElementOffset = function(element) { var style = $window.getComputedStyle(element, null), props = ['paddingTop', 'paddingBottom'], offset = 0;

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

            var adjustElementHeight = function(element, offset) {
              var newHeight = 0;
              element.style.overflowY = 'hidden';
              element.style.height = 'auto';
              newHeight = element.scrollHeight - offset;
              element.style.height = newHeight + 'px';
            };
    return {
        link: function($scope, $element, $attrs) {
          var element = $element[0];
          var offset = getElementOffset(element);

          var setHeight = function() {
            adjustElementHeight(element, offset);
          }

            element.addEventListener('input', setHeight, false);
            $window.addEventListener('resize', setHeight, false);

            $timeout(function(){
              setHeight();
            });
        }
    }
}]);

})();

https://plnkr.co/edit/r43DDnw68ZB9qX0O18Tm?p=preview

greetings Mike

[erperejildo]

Thanks @Mike120Git, works perfectly :) The only thing I see is not ok is when you have to deal with textareas with box-sizing: border box and width: 100%

Edit: I jus fixed it with this: element.style.height = newHeight + 8 + 'px'; The only problem is the initial size, it's too big

[ghost]

@CodingAspect Did you ever come up with a fix for textareas dynamically generated in an ng-repeat? Been using your directive and it works great outside of that issue!

[evyros]

@Mike120Git - I'm not sure why my comment isn't here, but this issue has been fixed right after you posted it. @justinabbott I tried to reproduce the issue on Angular v1.4 and it works perfectly with ng-repeat. Please review my Plunker and see what you do differently.