AngularJS 监听浏览器窗口宽度变化事件

在前端开发中，我们经常需要根据用户屏幕的尺寸来调整网页布局或者显示不同的内容。而 AngularJS 提供了一个方便的方式来监听浏览器窗口宽度变化的事件。

使用 $window 服务

AngularJS 中内置了一个名为 $window 的服务，可以用来操作浏览器的 window 对象。使用这个服务可以很容易地监听 window 对象的 resize 事件，并获取到浏览器窗口的当前宽度值。

angular.module('myApp', []).controller('MyCtrl', function($scope, $window) {
  angular.element($window).on('resize', function() {
    $scope.windowWidth = $window.innerWidth;
    $scope.$apply();
  });
});

上面的代码中，我们在控制器中注入了 $window 服务，并使用 angular.element 包装了 $window 对象来绑定 resize 事件。在事件处理函数中，我们将浏览器窗口的宽度值赋给 $scope.windowWidth 变量，并手动触发一次 $apply，以更新视图。

使用 $timeout 服务

虽然上面的代码可以正确地监听窗口宽度变化事件，但是由于 resize 事件会非常频繁地触发，因此手动触发 $apply 操作可能会导致性能问题。

为了解决这个问题，我们可以使用 AngularJS 内置的 $timeout 服务。这个服务会在指定时间后执行一段函数并自动触发 $apply 操作。

angular.module('myApp', []).controller('MyCtrl', function($scope, $window, $timeout) {
  angular.element($window).on('resize', function() {
    $timeout(function() {
      $scope.windowWidth = $window.innerWidth;
    });
  });
});

上面的代码中，我们将 $timeout 服务注入了控制器，并在 resize 事件处理函数中使用该服务延迟更新 $scope.windowWidth 变量的值。由于 $timeout 服务会自动触发 $apply 操作，因此我们不需要手动调用了。

总结

通过以上两种方式，我们可以很方便地在 AngularJS 应用中监听浏览器窗口宽度变化事件，并根据需要进行相应的处理。同时，也可以避免因过于频繁的 $apply 操作而导致的性能问题。

以上是本文对 AngularJS 监听浏览器窗口宽度变化事件的详细介绍和示例代码。希望本文能为大家提供一些参考和帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25285