在花括号中访问窗口高度AngularJS？

Question

我正在尝试在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'}}">

Answer 1

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

$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'}">

Answer 2

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

，然后使用html中的ng样式指令进行访问：

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