angularJS窗口调整大小问题

Question

所以不知何故，我在 JS 中造成了内存泄漏。好吧，我只是不断调整页面窗口的大小，然后 buum，86% 的内存使用率。内存不足 16GB。在我关闭所有东西后，我不得不重新启动我的电脑，因为它仍然显示 72% 的使用率。系统只占17%。

所以我真的不明白那里发生了什么，我只想在用户调整窗口大小时做出反应，因为如果宽度小于 640 像素，我会更改布局。

但是是的，这是我的代码。

索引.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

或者如果你仍然想使用角度指令的力量，删除 $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