角度:在另一个模态指令中加载的谷歌地图指令保持空白

Angular: Google maps directive loaded in another Modal directive stays blank

本文关键字：指令 谷歌地图 空白 加载 另一个 模态 角度      更新时间：2023-09-26

我对 angular 相当陌生，但在尝试在另一个指令中加载"谷歌地图"指令时遇到了障碍。

下面是一个"模态视图"指令，我在其中加载了一个表单。

    angular.module('test').directive('modal', function () {
    return {
      template: '<div class="modal fade">' +
          '<div class="modal-dialog">' +
            '<div class="modal-content">' +
              '<div class="modal-header">' +
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                '<h4 class="modal-title">{{ title }}</h4>' +
              '</div>' +
              '<div class="modal-body" ng-transclude></div>' +
            '</div>' +
          '</div>' +
        '</div>',
      restrict: 'E',
      transclude: 'element',
      replace:true,
      scope:false,
      link: function postLink(scope, element, attrs) {
        ...
      }
    };
});

接下来，这是谷歌地图指令...

    angular.module('test').directive('googleMaps', function () {
  return {
    restrict:'E',
    template:"<div></div>",
    replace:true,
    transclude: true,
    scope:false,
    link:function(scope, element, attrs){
      window.onload = function() {
        scope.map = new google.maps.Map(document.getElementById(attrs.id), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
        scope.map.addListener('click', function() {
          alert("Click!");
        });
      };
    }
  };
});

如果我只是正常加载 map 指令，地图看起来很好。当我尝试在其他指令中加载地图时出现问题，如下所示......

//modal directive        
<modal title="{{title}}" visible="showModal">
          <div class="row">
            <div class="col-sm-12">
              <form class="dropzone" dropzone="dropzoneConfig"></form>
            </div>
          </div>
          <form role="form" name="userForm"  ng-submit="addPerson(person)" novalidate>
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" name="name" class="form-control" id="name" placeholder="Enter your name" ng-model="person.name" required />
            </div>
    //Maps directive
            <google-maps id="map" class="form-group"></google-maps>
          </form>
        </modal>

此时，框架加载了谷歌徽标，但地图未加载，灰色背景保持显示。

任何帮助将不胜感激！谢谢

如果正常显示良好，那么它可能会digest问题。 您可以尝试在$timeout函数中初始化地图，无需document.onload。 您应该在使用前注射$timeout。

喜欢：

angular.module('test').directive('googleMaps', ['$timeout', function ($timeout) {
    return {
        restrict:'E',
        template:"<div></div>",
        replace:true,
        transclude: true,
        scope:false,
        link:function(scope, element, attrs){
            $timeout(function() {
                scope.map = new google.maps.Map(document.getElementById(attrs.id), {
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8
                });
                scope.map.addListener('click', function() {
                    alert("Click!");
                });
            });
        }
    };
}]);

多亏了 shaishab roy 的"$timeout"建议，我发现我正在尝试将地图加载到隐藏的div 中。解决方案是在显示模态视图时初始化地图。感谢您的帮助:)

相关文章：