wake-up-neo.com

Angular UI-Router erhalten asynchrone Daten mit Auflösung

Ich möchte ein Formular mit Daten anzeigen, die dem bearbeiteten Element entsprechen. Ich verwende ui-router für das Routing. Ich habe einen Zustand definiert:

myapp.config(function($stateProvider) {

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

In PropertyController möchte ich $scope.property mit den Daten des folgenden Aufrufs (Google Cloud-Endpunkte) festlegen:

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

Ich weiß nicht, ob ich resolve verwenden kann, da die Daten asynchron zurückgegeben werden. Ich habe es versucht 

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

Erste Ausgabe, die propertyId ist nicht definiert. Wie erhält man die propertyId vom url: "/properties/:propertyId"?

Grundsätzlich möchte ich $scope.property in PropertyController auf das vom async-Aufruf zurückgegebene resp-Objekt setzen.

BEARBEITEN:

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

Sie müssen die Dokumente für die Auflösung lesen. Auflösungsfunktionen sind injizierbar, und Sie können $stateParams verwenden, um den korrekten Wert von Ihren Routen zu erhalten, z.

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

Schließlich können die Werte für die Auflösungsfunktionen nach der Auflösung in Ihre Steuerung injiziert werden:

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

    $scope.property = propertyData;

});
53
Nate Abele

Ich denke, Ihre Controller-Funktion benötigt einen $stateParams-Parameter, von dem Sie Ihre propertyId erhalten können. Dann können Sie den $q-Parameter verwenden und ein Versprechen erstellen, um $scope.property folgendermaßen festzulegen:

var deferred = $q.defer();

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

$scope.property=deferred.promise;

Hier ist Beschreibung der Verwendung von Versprechungen zur Behandlung von asynchronen Aufrufen.

1
efan

Probieren Sie diese einfache Methode aus, um die Auflösung in geeigneter Weise zu verwenden

Landescode:

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

Im obigen Code sende ich Parameterdaten, die ich in der URL sende. Wenn ich zum Beispiel /demo/action/5 .__ sende, sende ich diese Nummer 5 an actionData. Dieser Dienst ruft einige Json-Daten basierend auf der ID ab Speichern in actionData Sie können dies in Ihrem Controller direkt verwenden, indem Sie diesen Namen verwenden

Der folgende Code gibt einige JSON-Daten basierend auf der ID zurück, die von iam auf Statusebene übergeben werden

(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

Wie wäre es damit:

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