Angularjs从控制器范围内的promise中返回数据

时间:2014-08-28 08:51:25

标签: javascript angularjs http promise

亲爱的AngularJS savies,

如何在具有从工厂返回的承诺的控制器中设置$ scope.data。我所能做的就是使用工厂对象方法范围内返回的数据,我无法将数据“加载”到控制器范围内的值中。如何将数据传递到控制器的范围?

代码序列如下 这是工厂:

var features = {};        
        // the method returns a promise tot he controller needed to be delt with .then()
        features.getPromise = function(){
            //make a promise
            var promise = $http({method: 'GET', url: '../../LIBS/inc/getAllGeoFeatures.php'})
                .success(function(data, status, headers, config){
                    return data;
                })
                .error(function(data, status, headers, config){
                    $log.warn(data, status, headers, config);
                });
            return promise;
        };

这是控制器:

$scope.data = 'null';

        factGetFeat.getPromise().then(function(promise){

            $scope.data = promise;
            $log.info($scope.data);  //gets the object all right
           // here I can work with the data but I cannot share it with the controller
           // i.e. with the view
        });

        $log.info($scope.data); //$scope.data is still null and I need it loaded with the data

我需要一些帮助,因为我觉得我无处可去

我甚至尝试使用方法的结果加载$ scope.data,但我只获取promsise对象而不是数据:

Object {then:function,catch:function,finally:function}

请告知。

P.S。我使用角度1.2.x

非常感谢您的时间和耐心。

2 个答案:

答案 0 :(得分:1)

应该是

var promise = factGetFeat.getPromise().then(function(promise){
   $scope.data = promise;
   $log.info($scope.data);  //gets the object all right
});

promise.then(function(){
    // here you can see $scope.data updated with a new value
    $log.info($scope.data); 
});

作为替代方案:

.then
第一个承诺解决后,

time 1:10 echo %time% 被评估

答案 1 :(得分:0)

你做的几乎是正确的。您只需要从服务中返回承诺。  如果我理解您的问题,那么当您在最后一页上调用$scope.data时,您担心$log.info($scope.data)为空。这是完全正确的。当HTTP调用成功完成时,将在稍后设置$scope.data。 如果您只在数据到达时需要执行任何操作,则必须包含success回调。

以下是它的样子:

var app = angular.module('app',[]);

app.factory('featuresService', ['$http', '$log', function($http, $log) {

    var getPromise = function() {
        //create the promise, this will be returned from this function
        var promise = $http({method: 'GET', url: '../../LIBS/inc/getAllGeoFeatures.php'});

        //on error do some logging here
        promise.error(function(data, status, headers, config) {
            $log.warn(data, status, headers, config);
        });

        return promise;
    };  

    return {
        getPromise: getPromise;
    }

  }]);


app.controller('testCtrl', 'featuresService', function($scope, featuresService) {

    //set initial values
    $scope.data = null;
    $scope.vectorAllLibs = null;

    var init = function() {
        featuresService.getPromise().then(function(data) {
            $scope.data = data;
            $scope.vectorAllLibs = convertVectorAllLibs(data);
        };
    };

    var convertVectorAllLibs = function(data) {
        return ol.source.GeoJSON({ projection: 'EPSG:3857', object: data });
    };

    $scope.processVectorAllLibs = function() {
        if (!$scope.vectorAllLibs) {
            alert('sorry, no data yet!');
            return;
        }

        //process here
    };

    init();

});