javascript - 在 AngularJS 中处理元素大小调整

Question

我有一个包含两个 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 时。这是我的指令 Controller 中的 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
});

但是，这并没有按预期工作。好像 watch 功能触发得太晚了。可以查看issue here on my plnkr .

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