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

回答

相關問題