CSS wird nicht angewendet, sobald die Größe des Fensters geändert wird. Es ist nur auf der Rolle angewendet

Question

Ich benutze eckigen Weg, um CSS anzuwenden, aber es wird nicht angewendet, wenn die Größe des Fensters. Die Canvas-Höhe wird beim Größenänderungsfenster geändert, aber die Tabellenhöhe wird nur beim Scrollen des Fensters angewendet. Ich möchte die gleiche Höhe der Leinwand festlegen, sobald wir die Größe des Fensters ändern.

Wie kann ich das beheben?

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

Schließlich habe ich es mit Hilfe der Richtlinie. Bitte schlagen Sie vor, ist das okay?

in index.html

<div class="ibox-content" match-window-height="['#chartCanvas']"> 

in 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

Ich denke, Sie brauchen ein anderes Timeout auf den Render warten.

Vielleicht so:

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();