调整窗口大小后，不会立即应用 CSS。它仅适用于滚动答案

【问题标题】：CSS not being applied as soon as we resize the window. It's only applied on scroll调整窗口大小后，不会立即应用 CSS。它仅适用于滚动
【发布时间】：2016-09-16 14:03:40
【问题描述】：

我正在使用角度方式应用 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);
  });

});

【问题讨论】：

标签： css angularjs

【解决方案1】：

我认为您需要另一个超时来等待渲染。

可能是这样的：

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

【讨论】：

不工作的伙伴。我已根据您的建议更新了我的代码
Bummer...resize 事件会触发吗？
并且 console.log(canvasHeight) 确实在调整大小时显示了更改的值？
实际上在我们滚动之前它不会显示新的画布高度。
我们可以使用$scope.$watch 或类似的东西

【解决方案2】：

最后我在指令的帮助下做到了。请建议可以吗？

在index.html

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

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

【讨论】：