角UI的路由器获取与决心异步数据 [英] Angular ui-router get asynchronous data with resolve

问题描述

我想显示与对应于所编辑的项数据的形式。我使用 UI路由器路由。我定义了一个状态：

  myapp.config（函数（$ stateProvider）{    $ stateProvider。
    .STATE（'layout.propertyedit'，{
        URL：/属性/：属性ID
        观点：{
            内容查看@：{
                templateUrl：'谐音/ content2.html'，
                控制器：'PropertyController
            }
        }
    }）;
 

在 PropertyController ，我想设置 $ scope.property 的数据从以下调用来（谷歌云端点）：

  gapi.client.realestate.get（属性ID）.execute（功能（RESP）{
        的console.log（RESP）;
    }）;
 

我不知道我是否可以使用解析，因为数据是异步返回。我试过

 解析：{
        propertyData：功能（）{
            返回gapi.client.realestate.get（属性ID）.execute（功能（RESP）{
                的console.log（RESP）;
            }）;
        }
    }
 

第一个问题，属性ID 是不确定的。你如何获得属性ID 从 URL：/属性/：属性ID？

基本上我想设置 $ scope.property 在 PropertyController 到 RESP 的异步调​​用返回的对象。

编辑：

  myapp.controller（'PropertyController'，函数（$范围，$ stateParams，$ Q）{    $ scope.property = {};    $ scope.create =功能（财产）{
    }    $ scope.update =功能（财产）{
    }功能loadData（）{
    变种推迟= $ q.defer（）;    gapi.client.realestate.get（{'ID'：'11'}）执行（功能（RESP）{。
        deferred.resolve（RESP）;
    }）;    $ scope.property = deferred.promise;
}}）;
 

解决方案

您需要阅读的文档进行解决。解析功能是可注射的，你可以使用 $ stateParams 从你的路由得到正确的值，如：

 解析：{
    propertyData：函数（$ stateParams，$ Q）{
        //该gapi.client.realestate对象应该被包裹在一个
        //可测性注射服务...        变种推迟= $ q.defer（）;        gapi.client.realestate.get（$ stateParams.propertyId）.execute（函数（R）{
            deferred.resolve（R）;
        }）;
        返回deferred.promise;
    }
}
 

最后，对于解决函数的值是注射在你的控制器解决了一次：

  myapp.controller（'PropertyController'，函数（$范围，propertyData）{    $ scope.property = propertyData;}）;
 

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

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

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

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

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

EDIT:

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

});

解决方案

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;

});

这篇关于角UI的路由器获取与决心异步数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！