0

I have created a directive for Google Map and I want it to cover 100% of parent container's width (works) and also 100% of parent container's height (did not work with css height:100%;). But the css is not my problem anymore. So I have created a method

getHeightOfMap(){

        if(document.getElementById('mapContainer').offsetHeight<100){
        var containerHeight = document.getElementById('map-canvas').parentNode.parentNode.parentNode.offsetHeight;
        if(containerHeight<100){
            containerHeight = 400;
        }
        return containerHeight+"px";
        }
        return document.getElementById('mapContainer').offsetHeight+"px";
    }

And here is how I use it in html template

<div id="mapContainer" style="margin:4px 0 -5px 0;" ng-style="{ 'height' : googleMapsCtrl.getHeightOfMap() }">
    <div id="map-canvas" style="display:block;height:100%;"></div>
</div>

This works great, but I found out that it use to "refresh" the ng-style what kills the performance (that's what AngularJS Batarang says) and after some time the app crashes.

Why is it happing ? And what is wrong with my approach in solving the problem with height ?

Stevik
  • 1,092
  • 2
  • 16
  • 37
  • changing the height causes the height to change, which then adjusts the hieght, which causes to height to change, which then adjusts the height, which then... maybe it would be better not to update the height so often. – dandavis Jun 30 '15 at 20:45
  • @dandavis No that's not it. The height doesn't change after is set (more than 100px). And what you wrote is infinite loop and that's not my case. It doesn't update that much. – Stevik Jun 30 '15 at 20:50
  • you can use just css to lock the height, if the container is relative and has a set height and the child is absolute set to 100%. – dandavis Jun 30 '15 at 20:53
  • @dandavis but as I wrote I want to solve the problem that crashes my app. – Stevik Jun 30 '15 at 20:55
  • throw a log statement into `getHeightOfMap()`, i bet it's being called more often than you think, especially since the height of the element is affected by net vertical margin (-1px), not just style.height, unless you've altered the box model. you might just be able to kill the padding/margin to fix it. can you link a fiddle which recreates the issue? we can say the problem with much more certainty if we could kick the tires... – dandavis Jun 30 '15 at 21:00
  • @dandavis I did check it and it was called every digest cycle so it was around every 10 secons – Stevik Jul 01 '15 at 21:06

0 Answers0