Question

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

使用外部库（可视化，图表......）我需要经常触发resize事件：

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

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

当我在控制器中执行类似操作时：

$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打印旧的大小而不应用全屏类。

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

小提琴示例：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完成渲染时执行。

您的更新小提琴：https://jsfiddle.net/gdabrz5x/

Answer 2

由于您使用jquery获取元素高度，因此必须等到元素更新其高度
只需在更改后延迟1ms以确保更新高度

setTimeout(function(){
   console.log($('#mycontainer').height())
}, 1)

Angularjs ng-class和resize事件

2 个答案: