Angular ui-router 通过解析获取异步数据 [英] Angular ui-router get asynchronous data with resolve

问题描述

我想显示一个表单，其中包含与编辑项目相对应的数据.我使用 ui-router 进行路由.我定义了一个状态:

I want to display a form with data corresponding to the edited item. I use ui-router for routing. I defined a state:

myapp.config(function($stateProvider) {

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

在 PropertyController 中，我想使用来自以下调用(Google Cloud Endpoints)的数据设置 $scope.property:

In PropertyController, I want to set $scope.property with data coming from the following call (Google Cloud Endpoints):

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

不知道能不能用resolve，因为数据是异步返回的.我试过

I don't know if I can use resolve because the data are returned asynchronously. I tried

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

第一个问题，propertyId 未定义.如何从 url: "/properties/:propertyId" 获取 propertyId ?

First issue, the propertyId is undefined. How do you get the propertyId from the url: "/properties/:propertyId"?

基本上我想将 PropertyController 中的 $scope.property 设置为异步调用返回的 resp 对象.

Basically I want to set $scope.property in PropertyController to the resp object returned by the async call.

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

});

推荐答案

您需要阅读 解决文档.解析函数是可注入的，您可以使用 $stateParams 从路由中获取正确的值，如下所示:

You need to read the docs for resolve. Resolve functions are injectable, and you can use $stateParams to get the correct value from your routes, like so:

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

最后，解析函数的值可以在解析后注入您的控制器:

Finally, the values for resolve functions are injectable in your controller once resolved:

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

    $scope.property = propertyData;

});

这篇关于Angular ui-router 通过解析获取异步数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！