javascript - 如何仅使用上面的 div 和下面的 div 动态更新 div 的最大高度？

Question

我正在使用 twitter bootstrap、angular 和 jquery 来尝试解决这个问题。

我有一个左侧的 div，里面还有 4 个其他的 div。这个左侧的 div 宽度为 300 像素，高度为 100%。

第一个 div 开始时是隐藏的，并且可以更改大小，因为它显示三种不同的错误消息之一，以及用户所做的选择。这个 div 有一个 ng-show 属性以及它的一些子元素上的 ng-show 属性。

第二个 div 和第四个 div 的大小始终相同。第四个 div 始终位于底部。

第三个 div 里面有一个表格。我想在此表上设置一个最大高度，以便我可以仅在此 div 上设置 overflow-y:auto。

有没有办法观察第二个 div 的底部，以便计算可用高度？

我有这段代码，但是，它在 ng-show 完成之前执行，所以大部分时间都是错误的:

app.directive('adjustTableHeight', ['$window', function($window) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            var w = angular.element($window);
            scope.getUpperDivBottom = function () {
                var upperDiv = angular.element('#secondDiv'),
                    upperDivBottom = upperDiv && upperDiv.length ? (upperDiv.position().top + upperDiv.outerHeight(true)) : 0;
                return Math.round(upperDivBottom);
            };
            scope.$watch(scope.getUpperDivBottom, function (newValue, oldValue) {
                var lowerDiv = angular.element('#fourthDiv'),
                    lowerDivTop = lowerDiv && lowerDiv.length ? lowerDiv.position().top : 0;
                console.log('upperDivBottom', newValue, oldValue);
                console.log('lowerDivTop', lowerDivTop);
                console.log('height', Math.round(lowerDivTop) - newValue);
                element.css('max-height', Math.round(lowerDivTop) - newValue);
            }, true);
            w.on('resize', _resize);
            scope.$on('$destroy', function() {
                w.off('resize', _resize);
            });
            function _resize() {
                scope.$apply();
            };
        }
    };
}]);

Answer 1

所以，我遇到的问题是我试图监控 angular 无法控制的元素，例如 div 的位置。一旦我修改了代码以观察正在变化的范围变量并添加了 $timeout，我就不再遇到所有问题并且一切都开始正常运行。

scope.$watchGroup(['item1, 'item2'],
    function(newValues, oldValues, scope) {
        $timeout(function() {
           setMaxHeight();
        }, 0);
    }
);