在窗口innerWidth尺寸变化angularjs事件 [英] angularjs event on window innerWidth size change

问题描述

我正在寻找一种方式来观看窗口内宽尺寸的变化而改变，我尝试以下，并没有工作：

I'm looking for a way to watch changes on window inner width size change, i tried the following and it didn't work:

$scope.$watch('window.innerWidth', function() {
            console.log(window.innerWidth);
        });

有什么建议？

推荐答案

尝试：

$scope.$watch(function(){
   return window.innerWidth;
}, function(value) {
   console.log(value);
}); 

这是更好地使用 $窗口服务：

$scope.$watch(function(){
    return $window.innerWidth;
}, function(value) {
    console.log(value);
});

从文档报价：

虽然窗口是全球可用在JavaScript中，它会导致
  可测试性的问题，因为它是一个全局变量。在我们的角
  总是通过$窗口服务引用它，因此它可能是
  覆盖，删除或模拟来测试。

While window is globally available in JavaScript, it causes testability problems, because it is a global variable. In angular we always refer to it through the $window service, so it may be overridden, removed or mocked for testing.

使用$手表在这种情况下，一个比特效率低下，因为该功能总是被运行以检查变化。我们可以用jQuery的方式做到这一点：

Using $watch is a bit inefficient in this case as this function will always be run to check for changes. We could do it with jQuery way:

$(window).resize(function(){
    alert(window.innerWidth);

    $scope.$apply(function(){
       //do something to update current scope based on the new innerWidth and let angular update the view.
    });
});

要知道，当你绑定范围内的事件处理程序，可以重建（如NG重复范围，指令范围，...），你应该解除您的事件处理程序的范围被销毁。如果你不这样做，每次当范围重建（控制器重新运行），将有1更多的处理器加入导致意外行为和泄漏。

Be aware that when you bind an event handler inside scopes that could be recreated (like ng-repeat scopes, directive scopes,..), you should unbind your event handler when the scope is destroyed. If you don't do this, everytime when the scope is recreated (the controller is rerun), there will be 1 more handler added causing unexpected behavior and leaking.

在这种情况下，您可能需要识别您的附加处理程序：

In this case, you may need to identify your attached handler:

  $(window).on("resize.doResize", function (){
      alert(window.innerWidth);

      $scope.$apply(function(){
          //do something to update current scope based on the new innerWidth and let angular update the view.
      });
  });

  $scope.$on("$destroy",function (){
      $(window).off("resize.doResize"); //remove the handler added earlier
  });

在这个例子中，我使用jQuery的从事件命名空间。你可以根据不同的客户要求做。

In this example, I'm using event namespace from jQuery. You could do it differently according to your requirements.

改进：如果您的事件处理程序需要有点长的时间来处理，以避免用户可能继续调整窗口大小，导致事件处理程序要运行很多次这个问题，我们可以考虑节流的功能。如果您使用下划线，你可以试试：

Improvement: If your event handler takes a bit long time to process, to avoid the problem that the user may keep resizing the window, causing the event handlers to be run many times, we could consider throttling the function. If you use underscore, you can try:

$(window).on("resize.doResize", _.throttle(function (){
    alert(window.innerWidth);

    $scope.$apply(function(){
        //do something to update current scope based on the new innerWidth and let angular update the view.
    });
},100));

或反跳功能：

$(window).on("resize.doResize", _.debounce(function (){
     alert(window.innerWidth);

     $scope.$apply(function(){
         //do something to update current scope based on the new innerWidth and let angular update the view.
     });
},100));

<一个href=\"http://stackoverflow.com/questions/25991367/difference-between-throttling-and-debouncing-a-function\">Difference限制和去抖动功能之间

这篇关于在窗口innerWidth尺寸变化angularjs事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！