なぜこの単純なng-bindとng-showは機能しないのですか？

Question

Googleのプレイスサービスから取得したデータを表示しようとしています。何らかの理由で、コントローラ内のコンソールにオブジェクトをログすることはできますが、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...}

Answer 1

これはあなたの非同期呼び出しです。

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