我正在尝试在一个有趣的项目中学习Angular,并遇到了一个我无法找到解决方案的问题。
当页面加载时,我从Web API方法获取数据并将结果放在vm.Locations中。这些结果最终会使用转发器显示在页面上。
稍后,在Google的Places API返回特定位置数据(单个记录)后调用createLocation。该数据被发布到Web API方法,如果成功,我将其结果推送到vm.Locations。
在初始页面加载时,所有内容都正确加载。稍后调用createLocation并且mc.locations.length绑定显示正确的更新值,但是转发器中的结果元素永远不会更新以显示新元素。
我认为$ scope。$ apply不是必需的,因为array.length似乎正在正确解析,但我暂时没有想法。
以下是主要内容:
Page:
<div ng-controller="MapController as mc">
<h1>Locations ({{mc.locations.length}})</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="location in mc.locations">
<td>{{location.Name}}</td>
<td>{{location.FormattedAddress}}</td>
</tr>
</tbody>
</table>
</div>
控制器:
function MapController($http) {
var vm = this;
var dataService = $http;
vm.locations = [];
vm.createLocation = function(location) {
var locationData = {
Name: location.name,
PlaceId: location.place_id,
FormattedAddress: location.formatted_address,
Latitude: location.geometry.location.lat(),
Longitude: location.geometry.location.lng()
}
var config = {
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' }
}
dataService.post("api/Location/AddLocation", locationData)
.success(function (data, status, headers, config) {
vm.locations.push(data);
})
.error(function (data, status, header, config) {
alert(status);
});
}
function getAllSavedLocations() {
dataService.get("/api/Location/GetAllLocations")
.then(function (result) {
angular.extend(vm.locations, result.data);
vm.locations.forEach(function (place) {
bounds.extend(new google.maps.LatLng(place.Latitude, place.Longitude));
vm.addLocationToMap(place.Name, place.Latitude, place.Longitude);
});
},
function (error) {
handleException(error);
});
}
...
}
答案 0 :(得分:0)
在createLocation的成功回调中和代码中:
vm.locations.push(的数据强>);
确保API返回的数据格式正确,并具有Name和FormattedAddress属性。记录此数据或在调试器上检查