2016-03-30 16 views
0

Google'ın Yer Hizmetinden getirilen verileri görüntülemeye çalışıyorum. Bazı nedenlerle, nesneyi denetleyicinin içindeki konsola kaydedebilirim ancak HTML dosyasında direktifler kolayca doldurulmuyor. Harita kullanmadığım için düğüm için bir div öğesi geçtim. Bu şekilde öznitelikleri görüntülemek için çevrimiçi bir rehber görünmüyordu, böylece nesneyi bir kapsam değişkenine atamayı ve bu şekilde görüntülemeyi denedim. $scope.location, konsol ekranına mükemmel bir nesneyi yazdırır, ancak bir ng-bind veya ng-show yönergesinin herhangi bir şey üretememesi başarısız olur.Bu basit ng-bind ve ng-show neden çalışmıyor?

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> 

Konsol çıkışı: 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...}

cevap

0

Bu zaman uyumsuz çağrı.

$scope.$apply(function(){ 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     $scope.location = place; 
     return console.log($scope.location); 
    } 
} 
+0

neden herhangi basit bir açıklaması ile

if (status == google.maps.places.PlacesServiceStatus.OK) { $scope.location = place; return console.log($scope.location); } 

yerine ? Bu çözüldü. – Jordan

+0

Async çağrıları, açısal $ özet olayında gerçekleşmiyor. Bu açısal açıyı bu değerlere bağlamanız gerektiğini söylemeliyiz. Bunun için resmi bir dokümantasyon var. https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply() –

+0

Çözülürse cevabı kabul edersiniz. –