web-dev-qa-db-ja.com

Angular ui-routerは解決された非同期データを取得します

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

myapp.config(function($stateProvider) {

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

PropertyControllerで、$scope.propertyに次の呼び出し（Google Cloud Endpoints）からのデータを設定します。

    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が未定義です。 url: "/properties/:propertyId"からどのようにしてpropertyIdを取得しますか？

基本的に、PropertyControllerの$scope.propertyを、非同期呼び出しによって返されたrespオブジェクトに設定します。

編集：

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;
}

});
angularjsangular-uiangular-ui-router
28
Sydney

解決のためのドキュメント を読む必要があります。解決関数は注入可能であり、$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;

});
53
Nate Abele

コントローラー関数には、propertyIdを取得できる$stateParamsパラメーターが必要だと思います。次に、$qパラメーターを使用して、次のようなもので$scope.propertyを設定するpromiseを作成できます。

var deferred = $q.defer();

gapi.client.realestate.get(propertyId).execute(function(resp) {
    deferred.resolve(resp);
});

$scope.property=deferred.promise;

非同期呼び出しを処理するための promiseの使用の説明 です。

1
efan

適切な方法で解決を使用するこの簡単な方法を試してください

状態コード：

.state('yourstate', {
                url: '/demo/action/:id',
                templateUrl: './view/demo.html',
                resolve:{
                    actionData: function(actionData, $q, $stateParams, $http){
                       return actionData.actionDataJson($stateParams.id);
                    }
                },
                controller: "DemoController",
                controllerAs : "DemoCtrl"
            })

上記のコードでは、URLで送信するパラメーターデータを送信しています。たとえば、このように送信する場合は/demo/action/5この番号5はactionDataサービスに移動します。このサービスはidに基づいてjsonデータを取得します。最後に、そのデータはactionDataに保存されます。

次のコードは、状態レベルでIAMが渡すIDに基づいてJSONデータを返します

(function retriveDemoJsonData(){

    angular.module('yourModuleName').factory('actionData', function ($q, $http) {

        var data={};
        data.actionDataJson = function(id){
           //The original business logic will apply based on URL Param ID 
            var defObj = $q.defer();
            $http.get('demodata.json')
                .then(function(res){
                     defObj.resolve(res.data[0]);
                });
            return defObj.promise;  
        }
        return data;
    });

})();
1
Ramesh M

これはどう：

function PropertyController($scope, $stateParams) {
   gapi.client.realestate.get($stateParams.propertyId).execute(function(resp) {
     $scope.property = resp;
   });
}
0
ambi