angularJS窗口调整大小问题

Question

所以我以某种方式在JS中造成了内存泄漏。好吧，我只是不断调整我的页面窗口，然后buum，86％的内存使用量。超出16gbs的内存。关闭所有东西之后，我不得不重启我的电脑，因为它仍然说72％的使用率。系统只占17％。

所以我真的不明白那里发生了什么，我想以某种方式在用户调整窗口大小时作出反应，因为如果宽度小于640px，我会改变布局。

但是这里是我的代码。

的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>

这个想法是，我有左右两边，在640px以下的屏幕宽度之后，我通过将一个.fullw {width：100％}风格附加到它们之下将它们推到彼此之下。

我的指示：

.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();
    });
};
})

它最终正在工作但是如果我通过整天调整大小来开始玩它，它开始使用大量的RAM ......

提前致谢

Answer 1

您应该只使用CSS媒体查询来执行此任务。在你的情况下简单的规则：

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

演示：http://plnkr.co/edit/js7J5oaE1LSshnSAkVDC?p=preview

或者如果你仍然想要使用angular指令的力量，删除$ watch部分，因为你不需要它，它会带来不必要的开销：

.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();
        });
    };
});

演示：http://plnkr.co/edit/6l3nlpB6G0BBodEPxQJJ?p=preview