如何使用 AngularJS 获取视口的尺寸？

在 AngularJS 中，可以使用 $window 服务来获取视口的尺寸。

方法一：使用 $window.innerHeight 和 $window.innerWidth 属性

$window.innerHeight 和 $window.innerWidth 分别返回视口的高度和宽度。

app.controller('MainCtrl', function($scope, $window) {
  $scope.getWindowDimensions = function () {
    return { 'h': $window.innerHeight, 'w': $window.innerWidth };
  };
});

在 HTML 中使用下面的代码片段即可：

<div ng-controller="MainCtrl">
  <p>Window height: {{getWindowDimensions().h}}</p>
  <p>Window width: {{getWindowDimensions().w}}</p>
</div>

方法二：使用 $window.getComputedStyle 方法

$window.getComputedStyle 方法可以返回元素的计算样式，包括元素的尺寸和位置等信息。我们可以通过获取 html 元素的计算样式，获取到视口的尺寸。

app.controller('MainCtrl', function($scope, $window) {
  $scope.getWindowDimensions = function () {
    var styles = $window.getComputedStyle(document.querySelector('html'));
    return { 'h': parseInt(styles.getPropertyValue('height')), 'w': parseInt(styles.getPropertyValue('width')) };
  };
});

在 HTML 中使用下面的代码片段即可：

<div ng-controller="MainCtrl">
  <p>Window height: {{getWindowDimensions().h}}</p>
  <p>Window width: {{getWindowDimensions().w}}</p>
</div>

以上就是在 AngularJS 中获取视口尺寸的两种方法。可以根据实际场景选择不同的方法。