Question

我试图动态调整Google地图的大小，为此我想我需要找到标题的高度。

我希望这样的事情能够发挥作用：

$scope.init = function() {
    $log.info("init");

    var header = angular.element('#header');
    console.log(header);
    console.log(header.height());

    var height = $window.innerHeight - header.height(); 
    angular.element("#photo-map .angular-google-map-container").height(height);
};


<body data-ng-controller="MainCtrl" data-ng-cloak="true" data-ng-init="init()">...</body>

但是，当找到标头时header.height()会返回null，可能是因为它尚未加载。

我也尝试了window.on("load", ...)，window.onload，$document.ready()以及其他一些jQuery-esque方法。

但是，如果我做了一个完全超时，那么它可以工作，所以我真的没有找到合适的事件将它绑定。

任何想法都是正确的事件？

尝试使用$ timeout：

$scope.init = function() {
    $timeout(function() {
        $log.info("header height", $('#header').height(), $('#header'));
    });
};

输出：

header height null [context: document, selector: "#header", jquery: "2.1.1", constructor: function, toArray: function…]

Answer 1

尝试$ timeout - 在呈现阶段之后运行$ timeout：

$scope.init = function() {
    $log.info("init");

    $timeout(function() {
       var header = angular.element('#header');
       console.log(header);
       console.log(header.height());

       var height = $window.innerHeight - header.height(); 
       angular.element("#photo-map .angular-google-map-container").height(height);
    });
};

AngularJS中header元素的height（）返回＆＃34; null＆＃34;

1 个答案: