Я использую директивы AngularUI uiMap для создания экземпляра Google Map. Директива uiMap прекрасно работает с жестко заданными данными ({mapOptions} и [myMarkers]); однако у меня возникают проблемы, когда я получаю эти данные через $http.get() (директива срабатывает до завершения вызова AJAX).

Первоначально я выполнял GET в своем контроллере GoogleMaps, но когда я понял, что все происходит не по порядку, я переместил GET в директиву uiMap. У меня есть 2 проблемы с этим:

1. Я думаю, что это не правильный способ сделать это.
2. The GET also retrieves the data for [myMarkers]
   • The function/directive that creates the markers is ubiquitous in that it is responsible for creating all overlays

Итак, мой вопрос: есть ли где-то еще в приложении, где я могу получить данные (и применить их к области) до запуска директивы?

Я прочитал $q, и похоже, что это то, что я хочу, но я не уверен, смогу ли я сделать это в своем контроллере, а не в директиве (также не уверен, чем $q.defer.resolve() отличается от $http.success()).

EDIT Большая часть кода, который я использую, это копирование/вставка из документа AngularUI, но вот рывок: http://plnkr.co/edit/t2Nq57

Решение

Основываясь на ответе Энди, я использовал комбинацию uiMap и uiIf:

<!-- index.html -->
<div
  id="map_container"
  ng-controller="GoogleMaps">

  <div ui-if="mapReady">

    <div
      ng-repeat="marker in markers"
      ui-map-marker="markers[$index]"
      ui-event="{'map-click':'openMarkerInfo(marker)'}"
    ></div>

    <div
      ui-map-info-window="myInfoWindow"
      ng-include="'infobox.html'"
    ></div>

    <div
      id="map_canvas"
      ui-map="myMap"
      ui-options="mapOptions"
    ></div>

  </div>

</div>

Предупреждение 1 uiIf не может находиться в том же элементе, который указывает контроллер, предоставляющий его условие (uiIf имеет более высокий приоритет, чем ngController, поэтому его контроллер не будет установлен до выполнения uiIf).

Предупреждение 2 Обязательно используйте самые последняя версия uiIf (версия, представленная в самом последнем теге v0.3.2, устарела). У старого есть ошибка, вызывающая TypeError при определенных обстоятельствах.

Предупреждение 3 jQuery ДОЛЖЕН быть включен перед AngularJS (в index.html); иначе вы получите TypeError о том, что Object [object Object] has no method 'trigger' (или Object [object HTMLDivElement] has no method 'trigger' в Windows). Chrome позволит вам войти в функцию триггера, потому что Chrome знает об этом, а Angular — нет (и Angular выдает ошибку).

function GoogleMaps( $scope , $http )
{

  var mapDefaults = {
    center:    new google.maps.LatLng(25,-90),//centres on Gulf of Mexico
    zoom:      4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  $scope.mapOptions = {};
  $scope.mapReady = false;
  $scope.markers = [];

  $http.get('map.json').then(function mapData(response) {

    var map_data = response.data,
      user_defaults = map_data.user.defaults; //{center: [lat,lng], zoom: 15}

    $scope.mapOptions = {
      "center":    (typeof user_defaults.center !== 'undefined') ?
        new google.maps.LatLng(user_defaults.center[0],user_defaults.center[1])
        : mapDefaults.center,
      "zoom":      (typeof user_defaults.zoom !== 'undefined') ?
        parseInt(user_defaults.zoom,10)
        : mapDefaults.zoom,
      "mapTypeId": mapDefaults.mapTypeId
    };

    //working on code to populate markers object

    $scope.mapReady = true;

  });

  // straight from sample on http://angular-ui.github.com/#directives-map
  $scope.addMarker = function($event) { … };
  $scope.openMarkerInfo = function(marker) { … };
  $scope.setMarkerPosition = function(marker, lat, lng) { … };

}//GoogleMaps{}

Недостаток В настоящее время uiMap не поддерживает создателей рендеринга на domready. Я рассматриваю альтернативную версию uiMapMarker, предложенную в этом GitHub. проблема/комментарий.
Решение этой проблемы: https://stackoverflow.com/a/14617167/758177
Пример работы: http://plnkr.co/edit/0CMdW3?p=preview