は、私はすべてがangularjsを使用して近くの検索結果をグーグル一覧表示しようとしていた角度ビュー

Question

でGoogleの場所オブジェクトの関数を呼び出すことはできませんが、私はGoogleの場所関数のgetURLを使用することはできません

ここ

この機能グーグルの角度コントローラ

$scope.bars = []; 
$scope.hospitals = []; 
$scope.PlaceSearch = function (type){  
     //ClearAllMarkers(); 
     if(map.getZoom() > 17){ map.setZoom(17)} 

    var bounds = map.getBounds(); 
    var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch({   
      bounds:bounds, 
      type: type, 
      rankBy:google.maps.places.RankBy.PROMINENCE, 
      //minPriceLevel:2, 
     }, function(results, status, pagination){ 
      if(status == 'ZERO_RESULTS') return FlashMessage('Zero Results for selected place','alert-info'); 

      if (status !== google.maps.places.PlacesServiceStatus.OK) { 
       console.log(' false in processResults'); 
       return; 
      }else{ 

      } 

      switch(type){        
       case 'bar': 
        angular.merge($scope.bars, results); 
        console.log($scope.bars); 
        if(pagination.hasNextPage) pagination.nextPage(); 
       break; 

       case 'Hospitals': 
        angular.merge($scope.hospitals, results); 
        if(pagination.hasNextPage) pagination.nextPage(); 
       break; 
      } 
     }); 
} 

で私のコードです

機能は、写真のプロパティを持っているpalceリストの配列を返します。写真は、写真の各オブジェクトの場所の写真のリストと配列ですgetUrl()場所の写真のURLを返す機能が含まれています。私のビューファイルで私はこのアプローチを使用しています。

<div class="sr-row clearfix" ng-repeat="bar in bars"> 
<div class="sr-thumb" ng-if="bar.hasOwnProperty('photos')"> 
    <img src="@{{ bar.photos[0].getUrl() }}" /> 
</div> 
<div class="sr-thumb" ng-if="!bar.hasOwnProperty('photos')"> 
    <img src="bar.icon" alt="palceholderImgae" /> 
</div> 
<div class="sr-detail"> 
    <div class="sr-title"> 
     <h3>@{{ bar.name | limitTo:30 }}</h3> 
    </div> 
    <div class="sr-middle"> 
     <p>@{{ bar.vicinity | limitTo:40 }}</p> 
    </div> 
    <div class="sr-bottom">               
     @{{ bar.rating }} 
    </div> 
</div> 

、これはエラー エラースロー：$の補間： 補間誤差

Can't interpolate: {{ bar.photos[0].getUrl() }} 
TypeError: b is undefined 


Error: [$interpolate:interr] http://errors.angularjs.org/1.5.7/$interpolate/interr?p0=%7B%7B%20bar.photos%5B0%5D.getUrl()%20%7D%7D&p1=TypeError%3A%20b%20is%20undefined 

Answer 1

INTERR私はその問題が "NG-場合は、" コンパイルしようとすることだと思うがとにかくサブDOMを補間します（値が "false"の場合はDOMから削除します）。 bar.photosが存在しない可能性があるため、問題が発生する可能性があります。

あなたのimg要素に "ng-src"を使って、その式を補間してみましょうか？

Answer 2

このエラーは、存在しないオブジェクトの関数呼び出しに関連している可能性があります。あなたは（例を参照）、これを試すことができます。 またhttps://plnkr.co/edit/z8mappFjJrGwAtvmSB6C?p=preview

<img ng-src="@{{ (bar && bar.photos) ? bar.photos[0].getUrl() : '' }}" /> 

を確認して、あなたの写真パラメータがのgetURL方法を持っているので、あなたが受けている。このコードは、デフォルトで

case 'bar': 
    angular.merge($scope.bars, results); 
    console.log($scope.bars); 
    if (pagination.hasNextPage) pagination.nextPage(); 
    break; 

内このような項目を持つjsonオブジェクト配列のみ：

"photos": [{ 
    "height": 270, 
    "html_attributions": [], 
    "photo_reference": "CnRnAAAAF-LjFR1ZV93eawe1cU_3QNMCNmaGkowY7CnOf-kcNmPhNnPEG9W979jOuJJ1sGr75rhD5hqKzjD8vbMbSsRnq_Ni3ZIGfY6hKWmsOf3qHKJInkm4h55lzvLAXJVc-Rr4kI9O1tmIblblUpg2oqoq8RIQRMQJhFsTr5s9haxQ07EQHxoUO0ICubVFGYfJiMUPor1GnIWb5i8", 
    "width": 519 
}] 

バーのバーにはgetUrl（）などのメソッドはありません。 photo_referenceのカスタムラッパーを使用してレスポンスを変更していますか？完全な画像を表示するには、それを提供してください。

Answer 3

写真の配列はです。PlacePhotoオブジェクト、レスポンスからPlacePhotoオブジェクトを検査すると、getUrl関数が見つかりませんでした。私はraw_referenceオブジェクトはので、私はこの{{bar.photos [0] .raw_reference.fife_url}}

が、私はそれはあなたの問題を解決することを願っていますように、画像のsrc補間を変更

プロパティfife_urlを持っていた見た

あなたが

<div class="sr-row clearfix" ng-repeat="bar in bars"> 
 
<div class="sr-thumb" ng-if="bar.hasOwnProperty('photos')"> 
 
    <img ng-if="bar.photos" src="{{bar.photos[0].raw_reference.fife_url}}" /> 
 
</div> 
 
<div class="sr-thumb" ng-if="!bar.hasOwnProperty('photos')"> 
 
    <img src="bar.icon" alt="palceholderImgae" /> 
 
</div> 
 
<div class="sr-detail"> 
 
    <div class="sr-title"> 
 
     <h3>@{{ bar.name | limitTo:30 }}</h3> 
 
    </div> 
 
    <div class="sr-middle"> 
 
     <p>@{{ bar.vicinity | limitTo:40 }}</p> 
 
    </div> 
 
    <div class="sr-bottom">               
 
     @{{ bar.rating }} 
 
    </div> 
 
</div>