[I didn’t “get it” because I used directives as a mixin to implement a UI feature. Directives are really supposed to be for encapsulating HTML into small templates.]
I’m not even going to do a code walkthrough, because I can’t really explain it well. The easy part is calculating the height the element should be. The tricky part is implementation.
Directives are parsed by Angular’s compiler, then execute according to a configuration object you define. My configuration object only included a link function. The link function is called, allowing you to modify the DOM, which includes adding event handlers.
I added a function to handle a window resize event.
The function is defined within link(), and is then bound to the window’s event handlers. (I didn’t alter the DOM otherwise.) It’s defined there so that we can get the element that we’re resizing.
Then, at the end of link(), I set a timeout to call the resize handler in 100 milliseconds. This is necessary because, for some reason, an immediate call to resize() failed to set the height correctly. I suspect that the DOM hasn’t rendered, so the element’s children don’t yet exist. Calling it with $timeout allows the DOM to settle down, and we can then resize the element.
Also, note the scope.$apply() in the handler. I’m not sure if that’s necessary, but it was in the code at Window Resize Event with Angular, which was helpful in understanding how to implement this directive.
| Attachment | Size |
|---|---|
| stretchdown.js_.txt | 1.34 KB |