在AngularJS中处理元素大小调整

Handle element resize in AngularJS

本文关键字：调整 元素 处理 AngularJS      更新时间：2023-09-26

我有一个带有两个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>

我试图使childContainerdiv与childdiv保持相同的高度，特别是当我隐藏testBtn1时。这是我指令的控制器中的手表功能，它应该做到这一点：

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

然而，这并没有如预期的那样起作用。就好像手表功能触发得太晚了。你可以在我的plnkr上查看这个问题。

$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
});
相关文章：