otherwise - ui sref angularjs example

Ui-router angular obtiene datos asincrónicos con resolución

Question

Quiero mostrar un formulario con los datos correspondientes al elemento editado. Yo uso ui-router para el enrutamiento. Definí un estado:

myapp.config(function($stateProvider) {

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

En PropertyController , quiero configurar $scope.property con datos provenientes de la siguiente llamada (Google Cloud Endpoints):

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

No sé si puedo usar la resolve porque los datos se devuelven de forma asíncrona. Lo intenté

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

Primer problema, el propertyId no está definido. ¿Cómo se obtiene el propertyId de la url: "/properties/:propertyId" ?

Básicamente quiero establecer $scope.property en PropertyController para el objeto resp devuelto por la llamada asincrónica.

EDITAR:

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

});

Answer 1

Creo que su función de controlador necesita el parámetro $stateParams desde el que puede obtener su propertyId . Luego puede usar el parámetro $q y crear la promesa de establecer $scope.property con algo como esto:

var deferred = $q.defer();

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

$scope.property=deferred.promise;

Aquí hay una descripción del uso de promesas para manejar llamadas asíncronas.

Answer 2

Qué tal esto:

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

Answer 3

Necesitas leer los documentos para resolverlos . Las funciones de $stateParams son inyectables, y puede usar $stateParams para obtener el valor correcto de sus rutas, así:

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

Finalmente, los valores para las funciones de resolución son inyectables en su controlador una vez resueltos:

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

    $scope.property = propertyData;

});

Answer 4

Pruebe esta manera fácil de usar la resolución de la manera correcta

Código del estado:

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

En el código anterior, estoy enviando datos de parámetros que estoy enviando en la url. Por ejemplo, si envío como este /demo/action/5 este número 5 irá al servicio actionData para que el servicio recupere algunos datos json basados ​​en id. Por último, los datos se almacenarán en actionData . Puede usar eso en su controlador directamente usando ese nombre

El código siguiente devuelve algunos datos JSON basados ​​en el ID que IAM pasa a nivel estatal

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

})();