Я пытаюсь отобразить данные, полученные из службы Google Place. По какой-то причине я могу зарегистрировать объект на консоли внутри контроллера, но в файле HTML директивы просто не заполняются. Поскольку я не использую карту, я передал элемент div для узла. Кажется, что нет никакого руководства для отображения атрибутов таким образом, поэтому я попытался присвоить объект переменной области и отобразить ее таким образом. $scope.location
печатает совершенно жизнеспособный объект на экране консоли, но директива ng-bind
или ng-show
ничего не дает.
controllers.js
Controllers.controller("LocationController", ["$routeParams", "$scope", "$location", function($routeParams, $scope, $location) {
if (!$routeParams.placeId) return $location.path("/");
var PlaceService;
$(document).ready(function() {
PlaceService = new google.maps.places.PlacesService(document.getElementById("locationContainer"));
});
PlaceService.getDetails({ placeId: $routeParams.placeId }, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
$scope.location = place;
return console.log($scope.location);
}
return console.log("ERROR: " + status);
});
}]);
location.html:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4">
<img ng-src="{{ location.icon }}">
</div>
<div class="col-xs-8">
<p ng-bind="location.name"></p>
</div>
</div>
</div>
</div>
<div id="locationContainer"></div>
Консольный вывод: Object { address_components=[9], adr_address="<span class="street-addr...ountry-name">USA</span>", formatted_address="935 W Wisconsin Ave, Milwaukee, WI 53233, USA", more...}
Это ваш асинхронный вызов. замещать
if (status == google.maps.places.PlacesServiceStatus.OK) {
$scope.location = place;
return console.log($scope.location);
}
с
$scope.$apply(function(){
if (status == google.maps.places.PlacesServiceStatus.OK) {
$scope.location = place;
return console.log($scope.location);
}
}