Handle element resize in AngularJS

Question

I have a directive with two divs:

<div id="childContainer">
  <div id="child">
    <a class="btn btn-primary testBtn1" ng-show="!vm.hideButton">Test Button 1</a>
    <a class="btn btn-secondary testBtn2">Test Button 2</a>
  </div>
</div>

I'm trying to keep the childContainer div the same height as the child div, specifically when I hide testBtn1. Here's the watch function inside my directive's controller which should do that:

$scope.$watch(function(){
  return vm.child.height(); //vm.child is a jQuery object
}, function(){
  vm.childContainer.height(vm.child.height()); //vm.childContainer is a jQuery object
});

However, this isn't working as expected. It's as if the watch function triggers too late. You can view the issue here on my plnkr.

Change your watch to the following: $scope.$watch('vm.child.height', function(){ vm.childContainer.height(vm.child.height()); }). — jperezov
– jperezov, Commented Nov 19, 2015 at 23:19
Hmm. I tried that, but then the watch event didn't trigger. Maybe it has something to do with the fact that I'm using controllerAs? — nardnob
– nardnob, Commented Nov 19, 2015 at 23:22
Yeah gimme a sec. I just realized you're putting a watch on the return value of a function--$watch doesn't work that way. You put a watch on a variable, not a value. — jperezov
– jperezov, Commented Nov 19, 2015 at 23:24

jperezov · Accepted Answer · 2015-11-19 23:22:29Z

2

$watch is supposed to take in the variable you want to monitor, not the value.

return vm.child.height(); //vm.child is a jQuery object

Here, you are returning the value of vm.child.height();. Change that to:

$scope.$watch('vm.child.height()', function(){
  vm.childContainer.height(vm.child.height()); //vm.childContainer is a jQuery object
});

answered Nov 19, 2015 at 23:22

jperezov

3,1912 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nardnob Over a year ago

I'll repost my comment on the answer.. I tried that, but then the event didn't trigger. I also tried watching vm.child.offsetHeight and that didn't work.

jperezov Over a year ago

@Brandon This is different from my comment. I even have it working on your plnkr.

nardnob Over a year ago

Oh, sorry. I can't believe you got it to work. I've been trying to get around this issue for over a day. Thank you

jperezov Over a year ago

Fresh set of eyes always helps. Make sure to use strings in your $watch statements. It's easier to read, and I'm 99% sure it's supposed to be a string anyways.

Collectives™ on Stack Overflow

Handle element resize in AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related