angularJS window resize issue

Question

So somehow I made a memory leak in JS. Well I only continously resized a window of my page, and then buum, 86% memory usage. out of 16gbs of memory. After I shut everything down I had to restart my pc because it still said 72% usage. System takes only 17%.

So I don't really understand whats happening there, all I wanted to somehow react when the user resizes the window because then I'd change the layout if the width is less than 640px for instance.

But yea here is my code.

Index.html:

<div id="wrapper" ng-controller="AppCtrl" resize>
    <div class="left-side" ng-class="{ fullw: smallR }">random content</div>
    <div class="right-side" ng-class"={ fullw: smallR }">random content2</div>
</div>

The idea was , I have the left and right side, after the screen width below 640px, I push them under each other by attaching a .fullw { width: 100% } style to them.

My directive:

.directive('resize', function ($window) {
return function (scope, element, attr) {

    var w = angular.element($window);
    scope.$watch(function () {
        return {
            'h': w.height(), 
            'w': w.width()
        };
    }, function (newValue, oldValue) {
        if(newValue.w <= 640) {
            scope.smallR = 1;
        } else {
            scope.smallR = 0;
        }
    }, true);

    w.bind('resize', function () {
        scope.$apply();
    });
};
})

Its eventually working however if I start to play with it by resizing all day long, it starts to use tremendeous amount of RAM...

Thanks in advance

Do you have an error like this. "10 $digest() iterations reached. aborting" ? — Michael
– Michael, Commented Nov 12, 2014 at 13:14
You don't need $watch here, you already have resize event. And you should not use Javascript here at all, user media queries. — dfsq
– dfsq, Commented Nov 12, 2014 at 13:14
at dfsq yes sort of. at Michael Zucchetta not always, but at some point yes. Kind of random o.o . at dfsq so instead just go without the scope.$watch and do like: var w... if ... else... w.bind... Angular directives are hard to understand for me as a newb in js. — Tyekx
– Tyekx, Commented Nov 12, 2014 at 13:19

dfsq · Accepted Answer · 2014-11-12 13:31:13Z

3

You should just use CSS media queries for this task. Simple rule in your case:

.fullw {
    width: 100px;
}    
@media (min-width: 640px) {
    .fullw {
        width: 100%;
    }
}

Demo: http://plnkr.co/edit/js7J5oaE1LSshnSAkVDC?p=preview

Or if you still want to use power of angular directive, remove $watch part, as you don't need it, it brings unnecessary overhead:

.directive('resize', function($window) {
    return function(scope, element, attr) {
        var w = angular.element($window);
        w.on('resize', function() {
            scope.smallR = w.width() <= 640 ? 0 : 1;
            scope.$apply();
        });
    };
});

Demo: http://plnkr.co/edit/6l3nlpB6G0BBodEPxQJJ?p=preview

answered Nov 12, 2014 at 13:31

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

Tyekx Over a year ago

Thank you dfsq for your help, I always learn so much from the SO community, I already implemented the first solution, and thanks again for pointing it out!

Collectives™ on Stack Overflow

angularJS window resize issue

1 Answer 1

Demo: http://plnkr.co/edit/js7J5oaE1LSshnSAkVDC?p=preview

Demo: http://plnkr.co/edit/6l3nlpB6G0BBodEPxQJJ?p=preview

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo: http://plnkr.co/edit/js7J5oaE1LSshnSAkVDC?p=preview

Demo: http://plnkr.co/edit/6l3nlpB6G0BBodEPxQJJ?p=preview

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related