I recently started learning AngularJs and I have a question about how angular handles the ng-class attribute.
While working with external libraries for visualization, charts, etc., I often need to trigger the resize event:
window.dispatchEvent(new Event('resize'));
For example: Charts inside a container that changes size when in fullscreen mode, or charts within a modal dialog...
When I try something like this in my controller:
$scope.fullscreen = true;
window.dispatchEvent(new Event('resize'));
console.log($('#mycontainer').height());
And in my template:
<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>
The console.log statement prints the old size without applying the fullscreen class.
Is there a way to render the ng-class inside a controller or forcefully apply a class without using the JQuery .addClass method?
Fiddle example: https://jsfiddle.net/Garet/d9c7ux3j/2/