Почему этот простой ng-bind и ng-show не работают?

0

Я пытаюсь отобразить данные, полученные из службы 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...}

Теги:
google-maps

1 ответ

0
Лучший ответ

Это ваш асинхронный вызов. замещать

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);
    }
}
  • 0
    Любое простое объяснение почему? Это решило это.
  • 0
    Асинхронные вызовы не происходят в событии angular $ digest. Поэтому мы должны сказать, что angular связывает эти значения. Для этого есть официальная документация. github.com/angular/angular.js/wiki/When-to-use-$scope.$apply ()
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню