각도 UI 라우터가 비동기 데이터를 해상도로 가져옵니다.

각도 UI 라우터가 비동기 데이터를 해상도로 가져옵니다.

편집한 항목에 대응하는 데이터가 있는 폼을 표시하고 싶습니다.사용하고 있다ui-router라우팅용입니다.상태를 정의했습니다.

myapp.config(function($stateProvider) {

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

인PropertyController, 설정하고 싶다.$scope.property다음 문의(Google Cloud Endpoints)에서 데이터를 수신합니다.

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

사용할 수 있을지 모르겠네요.resolve데이터가 비동기적으로 반환되기 때문입니다.나는 노력했다.

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

첫 번째 호는propertyId정의되어 있지 않습니다.어떻게 구하지?propertyId에서url: "/properties/:propertyId"?

기본적으로는$scope.property에PropertyController에게resp오브젝트가 비동기 콜에 의해 반환됩니다.

편집:

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올바른 값을 얻으려면 다음과 같이 하십시오.

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

마지막으로 해결 함수의 값은 해결되면 컨트롤러에 주입할 수 있습니다.

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

    $scope.property = propertyData;

});

당신의 컨트롤러 기능은$stateParams이 매개 변수에서 데이터를 얻을 수 있습니다.propertyId그럼, 을 사용할 수 있습니다.$qparameter와 create promise를 설정한다.$scope.property다음과 같은 방법으로요.

var deferred = $q.defer();

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

$scope.property=deferred.promise;

다음은 비동기 콜 처리에 대한 약속 사용에 대한 설명입니다.

이 쉬운 방법으로 해결 방법을 사용해 보십시오.

주 코드:

---

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

---

위 코드에서 url로 보내는 파라미터 데이터를 보냅니다. 예를 들어 이렇게 보내면/demo/action/5이 숫자 5는 다음 사람에게 갈 것이다.actionData서비스가 ID를 기반으로 일부 json 데이터를 검색합니다.마지막으로 이 데이터는actionData이 이름을 사용하여 컨트롤러에서 직접 사용할 수 있습니다.

다음 코드는 상태 레벨에서 통과한 ID를 기반으로 일부 JSON 데이터를 반환합니다.

---

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

})();

---

이거 어때:

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

언급URL : https://stackoverflow.com/questions/18004298/angular-ui-router-get-asynchronous-data-with-resolve