web-dev-qa-db-fra.com

Routeur ui angulaire obtenir des données asynchrones avec résolution

Je souhaite afficher un formulaire avec les données correspondant à l'élément modifié. J'utilise ui-router pour le routage. J'ai défini un état:

myapp.config(function($stateProvider) {

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

Dans PropertyController, je souhaite définir $scope.property avec les données provenant de l'appel suivant (points de terminaison Google Cloud):

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

Je ne sais pas si je peux utiliser resolve car les données sont renvoyées de manière asynchrone. j'ai essayé 

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

Premier numéro, la propertyId est indéfinie. Comment obtenez-vous la propertyId à partir du url: "/properties/:propertyId"?

En gros, je veux définir $scope.property dans PropertyController à l'objet resp renvoyé par l'appel asynchrone.

MODIFIER:

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

Vous devez lire les docs pour résoudre . Les fonctions de résolution sont injectables, et vous pouvez utiliser $stateParams pour obtenir la valeur correcte de vos routes, comme ceci:

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

Enfin, les valeurs des fonctions de résolution sont injectables dans votre contrôleur une fois résolues:

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

    $scope.property = propertyData;

});
53
Nate Abele

Je pense que votre fonction contrôleur a besoin du paramètre $stateParams à partir duquel vous pouvez obtenir votre propertyId. Ensuite, vous pouvez utiliser le paramètre $q et créer la promesse de définir $scope.property avec quelque chose comme ceci:

var deferred = $q.defer();

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

$scope.property=deferred.promise;

Voici description de l'utilisation de promesses pour le traitement des appels asynchrones.

1
efan

Essayez ce moyen facile d'utiliser résoudre de manière appropriée

Code d'état:

.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"
            })

Dans le code ci-dessus, j’envoie des données de paramètres que j’envoie dans l’url. Par exemple, si j’envoie comme ceci /demo/action/5 .__, ce numéro 5 ira au service actionData qui récupère des données json basées sur id.Finally stocker dans actionData Vous pouvez l’utiliser directement dans votre contrôleur en utilisant ce nom

Le code suivant renvoie des données JSON basées sur l'id que iam transmet au niveau de l'état

(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

Que dis-tu de ça:

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