Question

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

我有一个左手div，其中有4个其他div。这个左手div的宽度为300px，高度为100％。

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

第二个div总是相同的大小，以及第四个div。第四个div的位置始终位于底部。

第三个div里面有一张桌子。我想在这个表上设置一个max-height，这样我就可以在这个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);
    }
);

如何通过使用上面的div和下面的div来动态更新div的最大高度？

1 个答案: