使用ui-router解决方案等待加载谷歌地图

时间:2015-05-13 19:26:44

标签: angular-ui-router angular-promise angular-google-maps

我正在尝试在加载仪表板状态之前加载谷歌地图。似乎是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;

1 个答案:

答案 0 :(得分:0)

The controller that was waiting on the resolve was also the controller that establishes the scope variables needed by angular-google-maps to draw the map. That caused this: resolve cause the controller to not get called --> map never gets drawn because it is waiting on the controller to set some scope objects--> resolve that is waiting for map to be drawn never triggers --> controller never gets called