ウィンドウのサイズを変更するとすぐにCSSが適用されません。これはスクロールにのみ適用されます

Question

私は角度を使ってCSSを適用していますが、ウィンドウのサイズを変更すると適用されません。サイズ変更ウィンドウでキャンバスの高さが変更されますが、ウィンドウをスクロールするときにのみテーブルの高さが適用されます。私は、ウィンドウのサイズを変更するとすぐに同じ高さのキャンバスを設定したいと思います。

どうすればこの問題を解決できますか？

angular.element(document).ready(function ($timeout) { 

    function update_table_height(canvasHeight) { 
     angular.element('.scrollableContainer').css("height", canvasHeight + 5 + "px"); 
    } 

    angular.element(window).on("load resize scroll", function() { 
    var canvasHeight = angular.element('#chartCanvas').height();  
    update_table_height(canvasHeight); 
    }); 

    $timeout(function(){ 
    var canvasHeight = angular.element('#chartCanvas').height(); 
    update_table_height(canvasHeight); 
    }); 

}); 

Answer 1

は最後に、私は、ディレクティブの助けを借りてそれをやりました。それは大丈夫ですか？ app.directive.jsバディを働いていない

.directive('matchWindowHeight', function($timeout, $window) { 
     return { 
      restrict: 'A', 
      link: function (scope, el, attrs) { 
       var window = angular.element($window); 

       scope.$watch(function() { 
        var attribute = scope.$eval(attrs['matchWindowHeight']); 
        var targetElem = angular.element(document.querySelector(attribute[0])); 
        return targetElem.height(); 
       }, 
       function (newValue, oldValue) { 
        if (newValue != oldValue) { 
         el.css('height', newValue + 40); 
        } 
       }); 
       window.bind('load resize', function() { 
        scope.$apply(); 
       }); 
      } 
     }; 
    }); 

Answer 2

私はレンダリングを待つために別のタイムアウトが必要だと思います。たぶん、このような

：

angular.element(window).on("load resize scroll", function() { 
updateHeight(); 
}); 

function updateHeight(){ 

    $timeout(function(){ 
    var canvasHeight = angular.element('#chartCanvas').height(); 
    table_height(canvasHeight); 
    }); 
} 

// updateHeight on load 
updateHeight();