谷歌地图隐藏和显示地图

Question

我正在使用 angularjs，并且我正在使用 ng-if 来显示和删除从谷歌地图中呈现地图的指令，但每次我删除指令并再次放置时，地图都不会加载并消失灰色的。有没有人有任何想法或知道我该如何解决这个问题。

这是手风琴代码：

<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>

这是指令代码：

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);
    }

}

Answer 1

您是否尝试过使用ng-show 而不是ng-if？

ngIf documentation 声明：

ngIf 指令删除或重新创建 DOM 树的一部分 基于一个{表达式}。如果分配给 ngIf 的表达式计算 为 false 值，则从 DOM 中删除该元素，否则为 元素的克隆被重新插入到 DOM 中。

创建地图时，您附加到map 元素，但一旦被ngIf 删除，它就消失了。您必须重新创建地图才能再次显示。

documentation for ngShow 声明：

ngShow 指令显示或隐藏给定的 HTML 元素 提供给 ngShow 属性的表达式。显示元素 或通过删除或添加 .ng-hide CSS 类来隐藏 元素。

通过使用ng-show，您将能够实现您的目标，因为它只是通过向其添加 CSS 类来隐藏元素，而不是像 ng-if 那样将其从 DOM 中完全删除。