javascript - AngularJS 在指令运行之前通过 AJAX 检索数据

Question

我正在使用 AngularUI 的 uiMap 指令实例化谷歌地图。 uiMap 指令适用于硬编码数据({mapOptions} 和 [myMarkers])；但是，当我通过 $http.get() 检索此数据时遇到了麻烦(该指令在 AJAX 调用完成之前触发)。

最初我是在我的 GoogleMaps Controller 中执行 GET，但是当我意识到事情发生的顺序不对时，我将 GET 移到了 uiMap 指令中。我有两个问题:

1. 我认为这不是正确的方法。
2. GET 还检索 [myMarkers] 的数据
   • 创建标记的函数/指令无处不在，因为它负责创建所有覆盖

所以我的问题是，在指令运行之前，应用程序中是否还有其他地方可以检索数据(并将其应用于范围)？

我阅读了 $q ，这听起来像我想要的，但我不确定我是否可以在我的 Controller 中而不是在指令中完成(也不确定如何 $q.defer.resolve()与 $http.success() 有任何不同。

编辑 我使用的大部分代码都是从 AngularUI 的文档中复制/粘贴的，但这里有一个小插曲:http://plnkr.co/edit/t2Nq57

解决方案

基于 Andy's answer , 我结合使用了 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 不能位于指定提供其条件的 Controller 的同一元素中(uiIf 的优先级高于 ngController，因此它的 Controller 不会在 uiIf 执行之前设置)。

注意事项 2 务必使用最多 recent version of 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' on 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 上的渲染器。我正在研究此 GitHub issue / comment 中建议的 uiMapMarker 的替代版本.
此问题的解决方案:https://stackoverflow.com/a/14617167/758177
工作示例:http://plnkr.co/edit/0CMdW3?p=preview

Answer 1

您可以延迟 ui-map 的执行，直到您的数据加载完毕。

HTML:

<div ui-if="loadingIsDone">
  <div ui-map="myMap" ui-options="myOpts"></div>
</div>

JS:

$http.get('/mapdata').then(function(response) {
  $scope.myOpts = response.data;
  $scope.loadingIsDone = true;
});