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

Question

我对 Angular 相当陌生，但在尝试在另一个指令中加载“google map ”指令时遇到了障碍。

以下是一个“modal-view”指令，我在其中加载表单..

    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 指令， map 就会显示得很好。当我尝试在其他指令中加载 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>

此时，框架已加载谷歌 Logo ，但 map 尚未加载，灰色背景保持显示。

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

Answer 1

如果正常显示良好，则可能存在 Angular digest问题。您可以尝试在$timeout函数中初始化 map ，而无需document.onload。您应该在使用前注入(inject)$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!");
                });
            });
        }
    };
}]);