$ stateParamsを使用してURLの変数にアクセスする

Question

私はAngularJSアプリケーションを構築しており、$ stateParamsサービスについて混乱しています。 Google Mapsの 'center'変数をURLの緯度と経度の値として割り当てようとしています。ここで

は私の.configです：

.config(function ($stateProvider) { 
     $stateProvider.state('location', { 
      url: '/:lat/:lon', 
      templateUrl: 'index.html', 
      controller: 'MapsCtrl', 
      resolve: { 
       resolveMap: function (MapService, $stateParams) { 
        return MapService.getData($stateParams.lat, $stateParams.lon, $stateParams.radius); 
       } 
      } 
     }); 

    }) 

そして、ここで私がセンター定義する場所まで、私のコントローラの始まりです：私はエラーを取得しています

.controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams", 
    function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams, $http) { 
     $log.currentLevel = $log.LEVELS.debug; 
     var center = { latitude: $stateParams.lat, longitude: $stateParams.lon }; 

：「アンギュラグーグル-maps：有効な中心プロパティを見つけることができませんでした '。ここで

はJSフィドルであるが、それは（理由は上記のエラーの可能性が高い）任意の出力を表示しません：あなたは、彼らが設定している前に変数をバインドしようとしているので、https://jsfiddle.net/8mtge09w/

Answer 1

問題があります。すべてのgoogle-map指示子パラメータが最初に有効であることを確認する必要があります。 ディレクティブ要素をng-ifにラップして、地図のプロパティが準備されていることを確認できます。

私はあなたが確認する

ng-if="map.center !== undefined" 

を使用することができると信じています。基本的には、有効なプロパティがバインドされるまで要素をレンダリングしないでください。デフォルト値を設定し、ng-ifを避けることもできます。

詳細はthis github issueを参照してください。

Answer 2

ビューを変更すると、緯度と経度が正しく表示されます。

これに加えて、状態を定義するときは、デフォルト値でパラメータを設定する必要があります。

.state(
    ..... 
    params: { 
      latitude: defaultValue, 
      longitude: defaultValue 
    } 
)