使用 ui-router 解析等待 google 地图加载

Question

我试图在加载仪表板状态之前加载 google 地图。似乎是 ui-router resolve.

的完美使用

不幸的是，uiGmapIsReady 承诺永远不会解决。

如有任何帮助，我们将不胜感激。

state('app.dashboard', {
  url: '/dashboard',
  templateUrl: 'partials/dashboard.html',
  controller: 'dashCtrl',
  data: {
    authorizedRoles: [USER_ROLES.all]
  },
  resolve: {
    getGoogleMap: function(MapService){

      return MapService.getMap();
    }
  }
})



.factory('MapService', function(uiGmapIsReady, $q) {

  var obj = {};

  //returns a promise that is resolved only after the google map object created by angular-google-maps is loaded
  obj.getMap = function(){

    var deferred = $q.defer();

    uiGmapIsReady.promise()
      .then(function(map){
        deferred.resolve(map[0].map);
      });

    return deferred.promise;

  };

return obj;

Answer 1

等待解析的控制器也是建立 angular-google-maps 绘制地图所需的范围变量的控制器。这导致了这个： resolve 导致控制器不被调用 --> map 永远不会被绘制，因为它正在等待控制器设置一些范围对象 --> resolve 正在等待 map 被绘制永远不会触发 --> controller never被调用

使用 ui-router 解析等待 google 地图加载

Using a ui-router resolve to wait for a google map to load

angular-ui-router

angular-google-maps

angular-promise