访问花括号AngularJS中的窗口高度？答案

【问题标题】：Access the window height in curly braces AngularJS?访问花括号AngularJS中的窗口高度？
【发布时间】：2018-09-27 14:53:42
【问题描述】：

我正在尝试在我的 AngularJS 应用程序的 HTML 中使用花括号（如 {{}}）获取窗口高度。

但是我尝试的一切似乎都返回未定义。

{{window.innerHeight + 'px'}}
{{$window.innerHeight + 'px'}}
{{$(window).innerHeight + 'px'}}

我尝试了其他一些方法，但没有运气。如何在 AngularJS 应用程序中只获取带有花括号的窗口 innerHeight？

基本上我有一个模态，我试图将模态体最大高度动态设置为窗口高度的 75%...因为模态页脚在某些窗口大小上被切断页面，因为身体太大了。

<div class="modal-body" style="overflow: auto; max-height: {{(window.innerHeight*0.75) + 'px'}}">

【问题讨论】：

这绝不是一个好主意，但您可以在控制器中创建一个变量等于窗口。然后你在 HTML 中打印你的变量。 scope.myWindow = 窗口； {{myWindow}}
是的，我不是最有经验的 CSS 样式，我感觉根据我没有看到的窗口大小调整高度可能会有些复杂。当内容太大时，仍然需要考虑更好的方法来动态调整这个modal-body。谢谢

【解决方案1】：

最好的方法是观察 $window 的值 innerHeight 并将其分配给控制器中的变量：

$scope.$watch(function(){ return $window.innerHeight;} , function(newVal, oldVal){
    $ctrl.windowHeight = newVal;
});

但在调用摘要之前它不会刷新，要刷新它，您需要在 resize 上绑定一个事件并调用摘要：

angular.element($window).bind('resize', function () {
  $scope.$apply();
});

这是一个有效的fiddle

然后你就可以做到：

<div class="modal-body" style="overflow: auto;" ng-style="{$ctrl.windowHeight: wh + 'px'}">

由于您不使用控制器来绑定您的值而是您的范围，因此您的代码可能如下所示：

$scope.$watch(function(){ return $window.innerHeight;} , function(newVal, oldVal){
    $scope.windowHeight = newVal;
});

和：

<div class="modal-body" style="overflow: auto;" ng-style="{windowHeight: wh + 'px'}">

【讨论】：

【解决方案2】：

您不能直接通过 HTML 访问它，您需要在控制器内部创建一个变量，让我们将其命名为“wh”，如下所示 $scope.wh = window.innerHeight;

然后使用 html 中的指令 ng-style 访问它：

<div class="modal-body" style="overflow: auto;" ng-style="{maxHeight: wh + 'px'}">

【讨论】：