AngularJS通过AJAX检索数据的指令之前运行 [英] AngularJS retrieve data via AJAX before Directive runs
问题描述
我使用AngularUI的 的UIMap 指令来实例化一个谷歌地图。该指令的UIMap的伟大工程，具有硬codeD数据（ {}的MapOptions 和 [myMarkers] ）;然而，我遇到麻烦时，我通过检索 $ http.get这个数据（）（AJAX调用之前指令大火已完成）。
I'm using AngularUI's uiMap directives to instantiate a google map. The uiMap directive works great with hard-coded data ({mapOptions} and [myMarkers]); however I run into trouble when I retrieve this data via $http.get() (the directive fires before the AJAX call has finished).
起初我正在执行我的的GoogleMaps 控制器GET，但是当我意识到事情发生失序，我搬到了进入的UIMap 指令。我有2个问题与此：
Initially I was executing the GET in my GoogleMaps controller, but when I realised things were happening out of sequence, I moved the GET into the uiMap directive. I've got 2 problems with this:
- 我觉得这是不这样做的正确方法。
- 的GET还检索数据
[myMarkers]- 函数/指令，创建标志无处不在，它是负责创建所有的覆盖
所以我的问题是，有没有在应用程序中，我可以检索数据（并将其应用到范围）指令运行之前别的地方？
So my question is, is there somewhere else in the application where I can retrieve the data (and apply it to scope) before the directive runs?
我在 $ Q 读了，这有点像我想要的声音，但我不能肯定是否可以把控制器内，而不是在指令（也不清楚 $ q.defer.resolve（）如何比任何不同的<$ C $办呢C> $ http.success（））。
I read up on $q, and that kind of sounds like what I want, but I'm not sure if I can do it within my controller rather than in the directive (also not sure how $q.defer.resolve() is any different than $http.success()).
修改大多数我使用的是code是从AngularUI的文档复制/粘贴，但这里有一个普拉克：的 http://plnkr.co/edit/t2Nq57
EDIT Most of the code I'm using is copy/paste from AngularUI's doc, but here's a plunk: http://plnkr.co/edit/t2Nq57
Based on Andy's answer, I used a combination of uiMap and 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执行前设置）。
Caveat 1 uiIf cannot be in the same element that specifies the controller furnishing its condition (uiIf has higher priority than ngController, so its controller won't get set before uiIf executes).
买者2 请务必使用最的最近uiIf 的版本（在最近的标签提供的版本，v0.3.2，是过时了）。老一有错误在某些情况下导致一个TypeError。
Caveat 2 Be sure to use the most recent version of uiIf (the version supplied in the most recent tag, v0.3.2, is out of date). The old one has bug causing a TypeError under certain circumstances.
买者3 jQuery的必须包含AngularJS（index.html中）之前;否则你会收到一个类型错误，指出对象的翻译：有没有一种方法触发（或对象[对象HTMLDivElement]有没有一种方法触发在Windows上）。 Chrome将让你步入触发功能，因为浏览器知道它，但角度不（和角度抛出的错误）。
Caveat 3 jQuery MUST be included before AngularJS (in index.html); else you will receive a TypeError stating that Object [object Object] has no method 'trigger' (or Object [object HTMLDivElement] has no method 'trigger' on Windows). Chrome will allow you to step into the trigger function because Chrome knows about it, but Angular does not (and Angular is throwing the error).
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的问题/注释。
解决这个问题： http://stackoverflow.com/a/14617167/758177
工作例如： http://plnkr.co/edit/0CMdW3?p=$p$pview
Drawback uiMap does not currently support rendering makers on domready. I'm looking into an alternative version of uiMapMarker suggested in this GitHub issue / comment.
Solution to this issue: http://stackoverflow.com/a/14617167/758177
Working example: http://plnkr.co/edit/0CMdW3?p=preview
推荐答案
您可能只是直到你的数据被加载延迟的UI映射执行。
You could just delay execution of ui-map until your data is loaded.
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;
});
这篇关于AngularJS通过AJAX检索数据的指令之前运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
