0

I'm using angularjs and i'm using ng-if to show and remove a directive that is presenting a map from google maps, but every time i remove the directive and put it again the map doens't load and goes grey. Does anyone have any ideia or knows how i can solve this problem.

This is the accordion code:

<uib-accordion close-others="oneAtATime">
        <uib-accordion-group ng-repeat="mission in missions" is-open="status.open">
            <uib-accordion-heading >
                <div class="noOutline">
                    <i class="fa fa-map-o fa-2x pull-left"></i>
                    {{mission.description}}
                    {{status.open}}
                </div>
            </uib-accordion-heading>
            <missions-Map id='map' missionId='20' ng-if="status.open"></missions-Map>
        </uib-accordion-group>
    </uib-accordion>

This is the directive code:

angular.module("dronesIntershipProject").directive('missionsMap', function () {
var opened = false;
return {
    restrict: 'E',
    template: "<div></div>",
    replace: true,
    link: function(scope, element, attrs) {
        console.log(attrs.ngIf);
        var myLatLng = new google.maps.LatLng(20,20);
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            scrollwheel: true,
            zoom: 8
        });
        var marker =  new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: "My Marker"
        });
        marker.setMap(map);
        document.getElementById('map').removeAttribute("ng-if");
        console.log(element);
    }

}
duncan
  • 31,401
  • 13
  • 78
  • 99
Roberto Ponte
  • 63
  • 3

1 Answers1

0

Have you tried using ng-show instead of ng-if?

The ngIf documentation states:

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

When creating the map, you attach to the map element, but once it is removed by ngIf it is simply gone. You would have to recreate the map, in order for it to show up again.

The documentation for ngShow states:

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element.

By using ng-show, you will be able to achieve your goal, since it simply hides the element by adding a CSS class to it, instead of completely removing it from the DOM like ng-if.

Dexter
  • 2,462
  • 4
  • 24
  • 28
  • Yes i've tried, but instead of not only showing after i close and reopen the accordion the map doesnt even load properly the first time. – Roberto Ponte Mar 31 '16 at 09:23
  • Perhaps you could use the directive to apply a custom CSS class and hide it that way? I found a question in which this is done [here](https://stackoverflow.com/questions/4700594/google-maps-displaynone-problem). It looks like hiding an element using `display: none;` may be causing some issues with Google Maps, which may be part of the problem with `ngIf`. – Dexter Mar 31 '16 at 17:20