using angular directve to resize textarea on triggers using element.bind(event, function)

Question

I have a textarea that I want to resize on certain events using Angular directives.

What I have so far works for the event 'keydown' but I can't seem to figure out how to get the functionality working for other events.

I also tried figuring out how I could possibly achieve this functionality without using jquery's events.

What I would like is to trigger the update function once the data has been loaded into the textarea and when the entire browser window is resized.

Directive:

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

app.directive('autoGrow', function() {
  return function(scope, element, attr){
    var update = function(event) {
      element.css('height', element[0].scrollHeight + 'px');
    }
    element.bind('keydown', update); // Works
    element.bind('load', update);    // Doesn't quite have desired effect.
    element.bind('resize', update);  // Doesn't quite have desired effect.
    update();
  }
});

HTML:

<textarea auto-grow type="text" ng-model="model.foo">

Edit: Just to make sure I got my point across, all the bind elements above trigger as they are supposed to. I am just looking for a way that I can trigger my update function when: window is resized and when the ng-model changes or data is updated in the element.

http://jsfiddle.net/arunpjohny/qwaz1Lhf/1/ – Arun P Johny Aug 12 '14 at 10:14 — Arun P Johny, Aug 12 '14 at 10:14

score 1 · Accepted Answer · edited May 23 '17 at 12:20

Here is my proposal:

inject the $window service to be able to register a callback to the resize event

specify that you custom directive requires ng-model directive to be able to watch for modelchanges

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

app.directive('autoGrow', function($window) { return { require: 'ngModel', link: function(scope, element, attr, ngModelCtrl){

    scope.$watch(function () {
      return ngModelCtrl.$modelValue;
       },
       update,
       true // if deepwatch is required
       );

    var update = function(event) {
      element.css('height', element[0].scrollHeight + 'px');
    }

    element.on('keydown', update); // Works
    element.on('load', update);    // Doesn't quite have desired effect.
    element.on('resize', update);  // Doesn't quite have desired effect.
    update();

    angular.element($window).on('resize', update);
  }

};
});

More resources:

using angular directve to resize textarea on triggers using element.bind(event, function)

1 Answers1