Angular Service - 将 $http 数据传递给范围

Question

我正在尝试在 Service 内部创建一个角度函数，以通过 $http 返回访问数据，然后返回到所需的范围。

所以我的服务是这样的；

app.service('agrService', function ($http) {

    this.testinho = function(){
        return "teste";
    }

    this.bannerSlides = function(){

        var dataUrl = "data/banner-rotator.json";

        // Simple GET request example :
        $http({
            method: 'GET',
            dataType: "json",
            url: dataUrl
        })
        .success( function(data, status, headers, config) {

            // this callback will be called asynchronously
            // when the response is available

            //console.log(data);
            return data;

        }).error( function(data, status, headers, config) {

            // called asynchronously if an error occurs
            // or server returns response with an error status.
            alert("Niente, Nada, Caput");
        });

    }

})

然后我想将返回的数据与我的主 App 控制器内的范围相关联......就像这样：

app.controller('AppCtrl', function($scope, $http, agrService) {
    $scope.slides = agrService.bannerSlides();
})

然后在我的模板中，我想像这样循环数据：

<div ng-repeat="slide in slides">
    <div class="box" style="background: url('{{ slide.url }}') no-repeat center;"></div>
</div>

问题是数据只有在成功时才可用，我不知道如何将它传递给我的示波器幻灯片！！！！！！

我做错了什么？

在此先感谢

Answer 1

bannerSlides() 不会立即返回您需要的值。它返回一个承诺，您可以在以后使用它来获取该值。

在您的服务中，您可以使用$http() 产生的promise 的.then() 方法对结果进行初始处理：

 return $http({
    method: 'GET',
    dataType: "json",
    url: dataUrl
 }).then(function (data) {
     // inspect/modify the received data and pass it onward
     return data.data;
 }, function (error) {
     // inspect/modify the data and throw a new error or return data
     throw error;
 });

然后您可以在控制器中执行此操作：

app.controller('AppCtrl', function($scope, $http, agrService) {
     agrService.bannerSlides().then(function (data) {
         $scope.slides = data;
     });
})

Answer 2

在您的服务中使用它

.... 
this.bannerSlides = function(){
     var dataUrl = "data/banner-rotator.json";
     return $http({
        method: 'GET',
        dataType: "json",
        url: dataUrl
    });
};  
...

这在你的控制器中

agrService.bannerSlides().then(function(data) {
    $scope.slides = data;
}, function() {
   //error
});

你不需要 $q 服务内的承诺，因为 $http 默认返回一个承诺

$http 服务是一个函数，它接受一个参数——一个配置对象——即
用于生成 HTTP 请求并返回带有两个 $http 特定方法的承诺：成功和错误

reference

这是Fiddle Demo

Answer 3

您需要返回一个承诺并在回调中更新您的范围：

app.service('agrService', function ($q, $http) {

 this.bannerSlides = function(){
    var ret = $q.defer();
    var dataUrl = "data/banner-rotator.json";

    // Simple GET request example :
    $http({
        method: 'GET',
        dataType: "json",
        url: dataUrl
    })
    .success( function(data, status, headers, config) {

        // this callback will be called asynchronously
        // when the response is available

        ret.resolve(data);

    }).error( function(data, status, headers, config) {

        // called asynchronously if an error occurs
        // or server returns response with an error status.
        ret.reject("Niente, Nada, Caput");
    });
    return ret.promise;

 }
})

app.controller('AppCtrl', function($scope, $http, agrService) {
 $scope.slides = null;

 agrService.bannerSlides().then(function(data){
   $scope.slides = data;
 }, function(error){
   // do something else
 });

})

Answer 4

您不能从异步调用中返回常规变量，因为在执行此成功块时，函数已经完成了它的迭代。 您需要返回一个 Promise 对象（作为指导方针，并且最好从服务中执行）。

按照 $q 和 $http 的 angular 文档，您可以自己构建一个用于异步调用处理的模板。

模板应该是这样的：

angular.module('mymodule').factory('MyAsyncService', function($q, http) {

var service = {
    getData: function() {
        var params ={};
        var deferObject = $q.defer();
        params.nameId = 1;
        $http.get('/data', params).success(function(data) {
            deferObject.resolve(data)
        }).error(function(error) {
            deferObject.reject(error)
        });

        return $q.promise;
    }
}
});

angular.module('mymodule').controller('MyGettingNameCtrl', ['$scope', 'MyAsyncService', function ($scope, MyAsyncService) {

    $scope.getData= function() {
        MyAsyncService.getData().then(function(data) {
            //do something with data
        }, function(error) {
            //Error 
        })
    }
}]);