javascript - Angularjs ng类和调整大小事件

Question

我是 AngularJs 的新手，我对如何以 Angular 呈现 ng-class 属性有疑问。

使用外部库(可视化、图表等)我需要频繁触发调整大小事件:

window.dispatchEvent(new Event('resize'));

例如:容器内的图表在全屏模式下更改其大小，模式对话框内的图表...

当我在我的 Controller 中做类似的事情时:

$scope.fullscreen = true;
window.dispatchEvent(new Event('resize'));
console.log($('#mycontainer').height());

在我的模板中:

<style>
  #mycontainer {
    width: 100px;
    height: 100px;
    background-color: orange;
    color: white;
  }

  .fullscreen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
</style>

(...)

<div id="mycontainer" ng-class="{'fullscreen': fullscreen}">
  content here
</div>

console.log 打印旧尺寸而不应用类全屏。

有没有办法在 Controller 中渲染 ng-class 或强制应用类而不使用 JQuery .addClass 方法？

fiddle 示例:https://jsfiddle.net/Garet/d9c7ux3j/2/

Answer 1

伙计，你需要给dom一个定时器中断来渲染它，检查下面:

  var myapp = angular.module('myapp', []);

    myapp.controller('myctrl', function ($scope) {
   $scope.fullscreen = false;    
   $scope.toggleFullscreen = function() {
   $scope.fullscreen = true;
   window.dispatchEvent(new Event('resize'));
     console.log('before render:');
   console.log($('#mycontainer').height())

    setTimeout(function(){  console.log('after render:');
    console.log($('#mycontainer').height());})
 }
});

PS:你甚至不需要给它 1 秒，setTimeout 只会在 dom 渲染完成后执行。

您更新的 fiddle :https://jsfiddle.net/gdabrz5x/