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

Question

I am using twitter bootstrap, angular, and jquery to try to solve this issue.

I have a left hand div that has 4 other divs inside. This left hand div has a width of 300px and has a 100% height.

The first div starts off hidden and can change sizes because it shows one of three different error messages, as well as the selection that a user makes. This div has a ng-show attribute as well as ng-show attributes on some of it's child elements.

The second div is always the same size, as well as the fourth div. The fourth div is positioned to always be on the bottom.

The third div has a table inside of it. I want to set a max-height on this table so that I can set overflow-y:auto on this div only.

Is there a way to watch the bottom of the second div so that I can calculate the available height?

I have this code, however, it executes before the ng-show is finished, making it wrong most of the time:

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

So, the issue that I was having is that I was attempting to monitor items where angular has no control, like a div's position. Once I modified the code to watch scope variables that are changing and added a $timeout, I stopped having all issues and everything started working well.

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