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.

can we see a fiddle? :)

khakiout
– khakiout

2014-08-12 10:02:53 +00:00
Commented Aug 12, 2014 at 10:02 — khakiout
– khakiout, Commented Aug 12, 2014 at 10:02
jsfiddle.net/arunpjohny/qwaz1Lhf/1

Arun P Johny
– Arun P Johny

2014-08-12 10:14:29 +00:00
Commented Aug 12, 2014 at 10:14 — Arun P Johny
– Arun P Johny, Commented Aug 12, 2014 at 10:14

Community · Accepted Answer · 2017-05-23 12:20:50Z

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:

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related