Question

我使用angularjs并且我使用ng-if来显示和删除从谷歌地图中呈现地图的指令，但每次我删除该指令并再次放置地图都会执行＃＆＃ 39; t加载并变灰。有没有人有任何想法或知道如何解决这个问题。

这是手风琴代码：

<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中删除该元素，否则为a 将元素的克隆重新插入DOM。

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

documentation for ngShow州：

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

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

谷歌地图隐藏并显示地图

1 个答案: