Angular ui-routerはresolveで非同期データを取得します 質問する

Angular ui-routerはresolveで非同期データを取得します 質問する

編集された項目に対応するデータを含むフォームを表示したい。ui-routerルーティングに使用します。状態を定義しました:

myapp.config(function($stateProvider) {

    $stateProvider.
    .state('layout.propertyedit', {
        url: "/properties/:propertyId",
        views : {
            "contentView@": {
                templateUrl : 'partials/content2.html', 
                controller: 'PropertyController'
            }
        }
    });

では、次の呼び出し (Google Cloud Endpoints) から取得したデータをPropertyController設定します。$scope.property

    gapi.client.realestate.get(propertyId).execute(function(resp) {
        console.log(resp);
    });

resolveデータが非同期で返されるので使えるかどうかは分かりません。試してみました

    resolve: {
        propertyData: function() {
            return gapi.client.realestate.get(propertyId).execute(function(resp) {
                console.log(resp);
            });
        }
    }

最初の問題は、 が定義されていないことです。から をpropertyIdどのように取得するのでしょうか?propertyIdurl: "/properties/:propertyId"

基本的には、非同期呼び出しによって返されたオブジェクトに$scope.property設定したいと思います。PropertyControllerresp

編集:

myapp.controller('PropertyController', function($scope, , $stateParams, $q) {

    $scope.property = {};

    $scope.create = function(property) {
    }

    $scope.update = function(property) {
    }

function loadData() {
    var deferred = $q.defer();

    gapi.client.realestate.get({'id': '11'}).execute(function(resp) {
        deferred.resolve(resp);
    });

    $scope.property = deferred.promise;
}

});

ベストアンサー1

読む必要がある解決のためのドキュメント解決関数は挿入可能であり、$stateParams次のようにしてルートから正しい値を取得するために使用できます。

resolve: {
    propertyData: function($stateParams, $q) {
        // The gapi.client.realestate object should really be wrapped in an
        // injectable service for testability...

        var deferred = $q.defer();

        gapi.client.realestate.get($stateParams.propertyId).execute(function(r) {
            deferred.resolve(r);
        });
        return deferred.promise;
    }
}

最後に、解決関数の値は、解決されるとコントローラーに挿入可能になります。

myapp.controller('PropertyController', function($scope, propertyData) {

    $scope.property = propertyData;

});

おすすめ記事