위의 div와 div를 사용하여 div의 최대 높이를 동적으로 업데이트하려면 어떻게해야합니까?

Question

이 문제를 해결하기 위해 트위터 부트 스트랩, 각도 및 jquery를 사용하고 있습니다.

나는 내부에 다른 4 개의 div가있는 왼쪽 div가 있습니다. 이 왼손 div는 너비가 300px이고 높이가 100 %입니다.

첫 번째 div는 숨겨진 상태에서 시작되어 사용자가 선택한 세 가지 오류 메시지 중 하나를 표시하므로 크기가 변경 될 수 있습니다. 이 div에는 일부 ng-show 속성뿐만 아니라 ng-show 속성도 있습니다.

두 번째 div는 항상 같은 크기이며 네 번째 div입니다. 네 번째 div는 항상 맨 아래에 배치됩니다.

세 번째 div에는 표가 있습니다. 이 테이블에 max-height를 설정하여 overflow-y를 설정할 수 있습니다.이 div 만 자동으로 설정합니다.

사용 가능한 높이를 계산할 수 있도록 두 번째 div의 하단을 보는 방법이 있습니까?

나는 NG 쇼가 완료되기 전에이 코드는, 그러나, 그것이 잘못 대부분의 시간을 만들고, 실행이 :

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

그래서, 내가 가지고 있던 문제가 I가 시도되었다입니다 각도가 제어 할 수없는 항목 (예 : div의 위치)을 모니터링합니다. 범위 변수를 변경하여 코드를 수정하고 $ 타임 아웃을 추가하면 모든 문제를 해결하지 않고 모든 것이 잘 작동하기 시작했습니다.

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