如何僅使用上方的div和下方的div動態更新div的最大高度？

Question

我正在使用twitter bootstrap，angular和jquery嘗試解決此問題。

我有一個左手div，里面還有其他4個div。 此左div的寬度為300px，高度為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

因此，我遇到的問題是我試圖監視角度不受控制的項目，例如div的位置。 一旦修改了代碼以查看范圍變量的變化並添加了$ timeout，我就停止了所有問題，一切都開始正常運行。

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