2

Googleマップジオコーダーを使用するAngularサービスを作成しようとしていますが、サービス関数の実行後にGoogleからのコールバックが実行されていることがわかりました。

コントローラ

app.controller( 'AppCtrl',['geocoder',function AppCtrl (geocoder) {
   var result=geocoder.geocode('greek');
   console.log(result);
});

サービス

app.service('geocoder',function() {
            this.geocode=function(address) {
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode( { 'address': address}, function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                    console.log(results);
                                    return results;
                            } else {
                                    return ('Geocode was not successful for the following reason: ' + status);
                            }
                    });
            };
    });

問題は、コントローラーの console.log(result) が undefined を出力し、サービスの console.log(results) が関数の呼び出し後に Google から結果を取得することです。つまり、コールバック関数は時間内に結果を返しませんでした。

この問題を克服する方法はありますか? ありがとう。

4

2 に答える 2

3

コールバックは、ネットワーク\Web 呼び出しの非同期の性質を処理する方法です。geocodeメソッドの実装を次のいずれかに変更する必要があります

  • 応答が受信されたときにコールバック関数が呼び出されます。
  • 関数を使用して、呼び出し元の関数で処理できる promise を返しthenます。

両方の方法について詳しく説明しているこのブログ投稿を見つけましたhttp://markdalgleish.com/2013/06/using-promises-in-angularjs-views/

于 2013-09-22T09:05:44.180 に答える
1

Chandermani が指摘したように、メソッドにコールバックを提供する必要があります。

app.service('geocoder',function() {
            this.geocode=function(address, outerCallback) {
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode( { 'address': address}, function(results, status) {
                            console.log(results);
                            if (status == google.maps.GeocoderStatus.OK) {
                                    outerCallback({success: true, err: null, results: results});
                            } else {
                                    outerCallback({success:false, err: new Error('Geocode was not successful for the following reason: ' + status), results: null});
                            }
                    });
            };
    });

コントローラーで:

app.controller( 'AppCtrl',['geocoder',function AppCtrl (geocoder) {
   var result=geocoder.geocode('greek', function(callbackResult) {
      console.log(callbackResult); //{success: true, err: undefined, results: {...} or {success:false, err: Error object, results: undefined}
   });

});

これが機能する場合は、コードをリファクタリングしてpromise.

お役に立てれば、

R.

于 2013-09-22T09:29:25.410 に答える