Angularjs ng-class and resize event

Question

I am new on AngularJs and I have a doubt about how angular render the ng-class attribute.

Working with external libraries (visualization, charts, ...) I need to trigger frequently the resize event:

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

Eg: Charts inside a container that changes its size in fullscreen, charts inside a modal dialog...

When I do something like that 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>

console.log prints the old size without apply the class fullscreen.

Is there any way to render ng-class inside a controller or force apply a class without use the JQuery .addClass method?

Fiddle example: https://jsfiddle.net/Garet/d9c7ux3j/2/

set ng-class="{'fullscreen': true}"

Azad
– Azad

2015-11-13 10:14:22 +00:00
Commented Nov 13, 2015 at 10:14 — Azad
– Azad, Commented Nov 13, 2015 at 10:14

Kevin Simple · Accepted Answer · 2015-11-13 10:17:54Z

3

mate, you need give the dom a timer break to render it,check below:

  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：You dont even need give it 1 second , setTimeout will be executing only when the dom is done rendering.

Your updated fiddle: https://jsfiddle.net/gdabrz5x/

answered Nov 13, 2015 at 10:17

Kevin Simple

1,21312 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Garet Over a year ago

Thank you! I did not know that of setTimeout

Farnabaz · Accepted Answer · 2015-11-13 10:17:56Z

0

Since you are getting element height with jquery you must wait until element update its height
Just delay 1ms after change to to ensure height was updated

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

edited Nov 13, 2015 at 10:17

answered Nov 13, 2015 at 10:15

Farnabaz

4,0662 gold badges25 silver badges42 bronze badges

1 Comment

Kevin Simple Over a year ago

you just 1 second quicker than me

Collectives™ on Stack Overflow

Angularjs ng-class and resize event

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related