Angularjs ng class and resize event

我是AngularJs上的新成员，我对如何呈现ng-class属性的角度有疑问。Angularjs ng class and resize event

与外部库工作（可视化，图表，...）我需要频繁触发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/

来源

2015-11-13 Garet

集纳克级=“{‘全屏’：真正}” – azad

队友，你需要给一个计时器中断渲染它，请看下面：

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秒，只有当dom完成渲染时，setTimeout才会执行。

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

来源

2015-11-13 10:17:54

谢谢！我不知道setTimeout – Garet

既然你正在元素高度与jQuery你必须等到元素来更新其高度
只是延缓1ms更改后，确保高度更新

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

来源

2015-11-13 10:15:04 Farnabaz

你只需1秒的速度比我 –

Angularjs ng class and resize event

回答

相关问题