What is the correct way to watch an element's height in AngularJS 1.4.8?

Question

I realize that there are SO posts out there asking similar or even the same thing, but before you mash the duplicate button, be aware I have tried the solution from every single one, and none of them have worked in my target AngularJS version (1.4.8). With that in mind:

HTML:

<div ng-app="app" ng-controller="app">
  <textarea size-watch>{{ height }}</textarea>
</div>

JavaScript:

angular.module("app", [])
.controller("app", function() {
})
.directive("sizeWatch", function() {
    return {
    restrict: "A",
    link: function(scope, elem) {
            scope.$watch(function() { return elem[0].offsetHeight; }, function(newHeight, oldHeight) {
        scope.height = newHeight;
      }, true);
    }
  }
});

Fiddle.

Here's what I'm trying to do: I want to create a directive that watches the height of an element and updates a property on the scope whenever it changes. I can get the value to initially display, so I know the link between the directive and the controller/scope is working. However, I can't get the value to update when the textarea is resized (by dragging the bottom right corner). I put a call to debugger; in the second watch function, and verified that it's only getting called once.

Feel free to update the linked fiddle when you find a working solution.

`elem[0]` sorry, however look at this: http://stackoverflow.com/questions/5570390/resize-event-for-textarea — Callum Linington, May 12 '16 at 15:56
Seems to me like it would be better to make a div `contenteditable` and then attach resize event to that using `elem[0].addEventListener` — Callum Linington, May 12 '16 at 15:59
I'm running Chrome 50.0.2661.94 on Mac. `elem[0].attachEventHandler` is also not a function. [Here](https://jsfiddle.net/15pa293k/1/) is a separate fiddle with an attempt to use that. — Brian Gradin, May 12 '16 at 16:02
I only use `textarea` in the problem statement because it has an easy way to resize it; I'm not specifically looking for a way to be notified about textarea resize events, but rather element resizes in general. — Brian Gradin, May 12 '16 at 16:02

score 0 · Answer 1 · answered May 12 '16 at 16:25

0

My choice of element for testing purposes was unfortunate. Apparently textarea doesn't raise resize events the same way as other elements (specifically, like divs). Here's a working fiddle of what I was trying to achieve.

answered May 12 '16 at 16:25

Brian Gradin

2,165
1
21
42

I would recommend against `$watch` and just use the plain old javascript eventHandler. – Callum Linington May 12 '16 at 16:26
a) you're completely binding yourself into angular when it's unnecessary, b) there is far more overhead with `$watch` than `eventHandler` because you're trying to hook into the angular digest cycle for no reason, the more watchers on the page the slower it becomes. c) why be proactive when you can be reactive... proactive requires more memory more cpu, reactive doesn't, it just responds to the event when it happens. – Callum Linington May 13 '16 at 07:43
Well, I'm going to use the best solution that works. So far, I haven't been able to make `eventHandler`s work, and haven't seen a solution from anyone else that does, either. `$watch` works, and my project was already strongly tied to angular. – Brian Gradin May 13 '16 at 16:55
One question I still have about the disadvantage of `$watch` - you mentioned proactive vs reactive...does `$watch` use polling? – Brian Gradin May 13 '16 at 16:56
Yeah, because it is part of the digest cycle, so it is attaching a watcher to that specific property of that object, and then every so often it will check the value to see if it has changed (dirty checking) – Callum Linington May 13 '16 at 19:09
But more importantly I wouldn't want to be locking every part of your application logic down to Angular, because well you know, the changing winds and all that – Callum Linington May 13 '16 at 19:09

What is the correct way to watch an element's height in AngularJS 1.4.8?

1 Answers1