Comment obtenir la hauteur de la fenêtre en js angulaire

Je m 'utilisation d'iframe pour afficher le contenu en utilisant angularjs avec ionic framework. Ici, j'ai besoin de donner de la hauteur de la fenêtre comme iframe hauteur, j'ai donc utilisé

  $scope.iframeHeight = window.innerHeight;

Mais, je reçois 1/4ème de l'écran seulement.

Ici ce que j'ai essayé jusqu'à présent.

index.html

<!DOCTYPE html>
<html ng-app="ionicApp">
    <head>
    <!-- ionic/angularjs CSS -->
    <link href="css/ionic.css" rel="stylesheet">
    <link href="css/ionic-custom.css" rel="stylesheet">
    <!-- ionic/angularjs js bundle -->
    <script type="text/javascript" src="js/ionic.bundle.js"></script>
    <script>
    angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) { 
  $scope.iframeHeight = window.innerHeight;
});
    </script>
    </head>
    <body ng-controller="MainCtrl">
        <iframe src="http://stackoverflow.com" ng-style="{height:iFrameHeight}" id="iframeid" width="100%" ></iframe>   
    </body>
</html>

Suis-je raté quelque chose?

source d'informationauteur UI_Dev | 2015-02-25

  1. 11

    Principal problème: vous avez besoin d'ajouter " px " unités de window.innerHeight nombre. Et la seconde, le nom de variable est iframeHeight pas iFrameHeight. Expression fixe ressemblera:

    ng-style="{height: iframeHeight + 'px'}"

    Démo: http://plnkr.co/edit/NdQB5afQT7kMkf27k7wg?p=preview

  2. 6

    La fenêtre de l'objet, bien que, globalement disponible a la testabilité des questions comme référence dans l'angle de docs https://docs.angularjs.org/api/ng/service/$de la fenêtre .Il ressemble à son pas un problème sur votre code, mais pour une bonne pratique, vous pouvez injecter $de la fenêtre de service de référence à la place, et bien sûr le "px" question sur le fond.

       angular.module('ionicApp', ['ionic']) 
    .controller('MainCtrl', function($scope, $window) { 
   $scope.iframeHeight = $window.innerHeight;
     });

    Plus tard, comme l'a dit avant;

      ng-style="{height: iframeHeight + 'px'}"
  3. 4

    Depuis AngularJS contient une petite partie de jQuery par lui-même, vous pouvez utiliser:

    //Returns height of browser viewport
$scope.iframeHeight = $(window).height();

    ou 

    //Returns height of HTML document
$scope.iframeHeight = $(document).height();
  4. 0

    Calculte la hauteur des fenêtres à l'aide angulaire

    $scope.screenHeight = '';
$scope.calculateoriginalWidth = function() {
    var width = $window.innerWidth;
    $rootScope.originalWidth = width;
}
$scope.calculateScreenHeight = function() {
    var height = $window.innerHeight;
    var width = $window.innerWidth;
    var subheight = 0;
    var headerheight = document.getElementById('headerTitle1');
    var headerheight2 = document.getElementById('headerTitle2');
    if (headerheight) {
        subheight += headerheight.offsetHeight;
    }
    if (headerheight2) {
        subheight += headerheight2.offsetHeight;
    }

    $scope.screenHeight = height - subheight - 20;
    $rootScope.screenHeight = $scope.screenHeight;
    $scope.screenWidth = width;
    $rootScope.screenWidth = $scope.screenWidth;
}

var reg = $scope.$on('screenResize', function($evt, args) {
    $scope.calculateScreenHeight();
    $scope.$apply();
})

window.onresize = function(event) {
    $scope.$apply(function() {
    $scope.calculateScreenHeight();
    })
};

$scope.calculateScreenHeight();
$scope.calculateoriginalWidth();

    Vous devez ajouter les dépendances nécessaires dans angulaire pour l'utilisation de ce code. Espérons que cela vous aidera à calculer la hauteur de la fenêtre.