should this component still work? about angularjs-autogrow HOT 8 CLOSED

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

from angularjs-autogrow.

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

from angularjs-autogrow.

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)

from angularjs-autogrow.

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

from angularjs-autogrow.

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>

from angularjs-autogrow.

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

from angularjs-autogrow.

@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!

from angularjs-autogrow.

@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.

from angularjs-autogrow.