在 AngularJS 中处理元素调整大小答案

【问题标题】：Handle element resize in AngularJS在 AngularJS 中处理元素调整大小
【发布时间】：2015-11-19 22:56:23
【问题描述】：

我有一个带有两个 div 的指令：

<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>

我试图保持childContainer div 与child div 相同的高度，特别是当我隐藏testBtn1 时。这是我的指令控制器中应该执行此操作的 watch 函数：

$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
});

但是，这并没有按预期工作。就好像监视功能触发得太晚了。您可以查看问题here on my plnkr。

【问题讨论】：

将您的手表更改为以下内容：$scope.$watch('vm.child.height', function(){ vm.childContainer.height(vm.child.height()); }).
嗯。我试过了，但是手表事件没有触发。也许这与我使用 controllerAs 的事实有关？
是的，请稍等。我刚刚意识到您正在监视函数的返回值--$watch 不是这样工作的。你把手表放在一个变量上，而不是一个值上。

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

$watch 应该接受您要监控的变量，而不是值。

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

在这里，您将返回vm.child.height(); 的值。将其更改为：

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

【讨论】：

我将重新发布我对答案的评论。我试过了，但事件没有触发。我也试过看 vm.child.offsetHeight ，但没用。
@Brandon 这与我的评论不同。 I even have it working on your plnkr.
哦，对不起。我不敢相信你让它工作了。一天多来，我一直试图解决这个问题。谢谢
新鲜的眼睛总是有帮助的。确保在 $watch 语句中使用字符串。它更容易阅读，而且我 99% 肯定它应该是一个字符串。