我在浏览器控制台中收到了很多这样的内容:
分块迭代器中的错误:TypeError:无法读取属性' x'的 空
我的应用程序目前包含一个位置列表和地图显示,当点击一个位置时,地图会缩放到该纬度。
点击几下后,我开始收到此错误,地图不再响应。
我正在使用angular-google-maps指令,如果这也与答案有关。
我的地图编码如下:
<div ng-controller="MapController as mapCtrl" class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main">
<ui-gmap-google-map center='mapCtrl.map.center' zoom='mapCtrl.map.zoom'>
<ui-gmap-markers models="mapCtrl.mapMarkers" coords="'self'" icon="'icon'" options="'options'">
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
在我的MapController中:
app.controller('MapController', ['$scope', 'LastReportedEventStore', 'MapMarkerService', 'uiGmapGoogleMapApi', function ($scope, LastReportedEventStore, MapMarkerService, uiGmapGoogleMapApi) {
var self = this;
//Default to UK overview
self.map = { center: { latitude: 51.63841, longitude: -0.55494 }, zoom: 7 };
uiGmapGoogleMapApi.then(function (maps) {
self.mapMarkers = MapMarkerService.transformResponseData(LastReportedEventStore.lastReportedEvents);
});
$scope.$on('zoomtolatlon', function (event, args) {
self.map = { center: { latitude: args.lat, longitude: args.lon }, zoom: 15 };
});
} ]);
我的位置列表中有一个单独的控制器,因此当其中一个元素发生单击时,我会通过ng-click函数处理并广播一个事件:
$rootScope.$broadcast('zoomtolatlon', { lat: lat, lon: lon });
任何人都可以了解导致这种情况失败的原因吗?
修改
好的,所以我应该发布更多关于我在这里做的事情的代码。我的服务如下:
app.factory('DataStoreService', function ($rootScope, $location, $http, $timeout, LastReportedEventStore, MapMarkerService) {
var getLastReportedEventsURL = '/location/GetLastReportedEvents.json?FieldSet=1&modifiedSince=0';
//TO-DO: Need to think about adding a cachebuster _dc param like we do in ExtJS?
return {
//lastReportedEvents: lastReportedEvents,
getLastReportedEvents: function () {
$http.get(getLastReportedEventsURL)
.success(function (data, status, headers, config) {
if (data.success) {
var result = angular.fromJson(data);
getLastReportedEventsURL = 'location' + result.nextURL;
LastReportedEventStore.transformResponseData(result.data);
if (angular.isDefined(google)) {
MapMarkerService.transformResponseData(result.data);
}
$rootScope.$emit('lastreportedeventsreceived');
}
else {
console.log('getLocationData ERROR!');
}
})
.error(function (data, status, headers, config) {
console.log('getLocationData ERROR!');
});
}
};
});
我的主要模块
var app = angular.module('ppMobi', [])
.run(['DataStoreService', '$timeout', '$rootScope', function (DataStoreService, $timeout, $rootScope) {
DataStoreService.getLastReportedEvents();
$rootScope.$on('lastreportedeventsreceived', function (event) {
$timeout(function () {
DataStoreService.getLastReportedEvents();
}, 5000);
});
}]);
因此,当应用程序被引导时,会立即执行$ http.get(),然后从服务中该请求中的成功处理程序执行,会引发$ rootScope在运行块中处理的事件,如上所述。发生超时并执行新的提取时,我看到了分块迭代器错误