Доступ к высоте окна в фигурных скобках AngularJS? - PullRequest
0 голосов
/ 27 сентября 2018

Я пытаюсь получить высоту окна в фигурных скобках, таких как {{}} в HTML-коде моего приложения AngularJS.

Однако все, что я пытаюсь, похоже, возвращает undefined.

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

Я пробовал несколько других вещей, но не повезло.Как я могу получить только окно innerHeight с фигурными скобками в приложении AngularJS?

По сути, у меня есть модал, который я пытаюсь установить для максимальной высоты модального тела равной 75% от высоты окна динамически.... как модальный нижний колонтитул обрезают страницу на окнах некоторых размеров, потому что тело слишком большое.

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

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

Лучшим способом было бы посмотреть значение innerHeight из $window и присвоить его переменной с вашего контроллера:

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

Но оно не обновится, пока не будет вызван дайджест, длячтобы его обновить, вам нужно привязать событие к resize и вызвать дайджест:

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

Вот рабочая скрипка

После этого вы сможетесделать:

<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'}">
0 голосов
/ 27 сентября 2018

Вы не можете получить к нему доступ напрямую через HTML, вам нужно создать внутри вашего контроллера переменную, назовите ее " wh " примерно так $scope.wh = window.innerHeight;

и затем получите к ней доступиспользуя директиву ng-style из вашего html:

<div class="modal-body" style="overflow: auto;" ng-style="{maxHeight: wh + 'px'}">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...