Question

我有json文件

[
    {
        "Name": "namesfoo3",
        "param1": "paramoffoo3",
        "param2": "param2offoo3"
    },
    {
        "Name": "namesfoo3",
        "param1": "paramoffoo3",
        "param2": "param2offoo3"
    }
]

我希望通过服务获取数据并将其作为控制器传递。 js文件：

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

myApp.controller('filtrController',function($http,$scope,testService)
{                      
     Init();
     function Init()
     {
           $scope.data={};
           console.log(testService.getData());    
     }

});

myApp.service('testService',function($http)
{    
     this.getData = function()
     {
         var obj = {content:null};
         $http.get('data.json')
              .success(function(response) {
              // alert();
              console.log(response);
              obj.content = response;
         });
              return obj;      
     }
});

但是在控制台登录控制器中我返回：Object {content：null}。数据加载正确，因为在服务中我得到正确的对象和数据。那么如何将数据传递给控制器呢？当我从数组php返回数据并将其作为json_encode传递时，该示例仍然有效吗？

Answer 1

你不能在回调中做一个返回，它是异步的，当服务器的响应到来时，该功能已经完成，你将失去流量。

你需要做的是利用承诺。因此，从服务中，您将承诺返回给控制器，当响应到来时，回调将在控制器中触发。像这样：

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

myApp.controller('filtrController', function ($scope, testService) {

    Init();

    function Init() {
        $scope.data = {};
        testService.getData().then(data) {
            console.log(data)
        });
    }

});

myApp.service('testService', function ($http) {

    this.getData = function () {
        return $http.get('data.json');
    }
});

如果您想对服务中的数据执行某些操作，您还可以链接承诺。有关它的更多信息，请参见docs about $q service。

Answer 2

您正在进行异步调用，因此您应该等待回调。

将您的代码更改为：

function Init()
{
    $scope.data={};
    testService.getData().then(function(result){
          console.log(result);
    })                  
}

现在，在服务中你还要等待返回对象。否则你在获取之前返回obj：

myApp.service('testService',function($http)
{    
     this.getData = function()
     {
         var defer = $.Deferred();
         $http.get('data.json')
              .success(function(response) {
                  // alert();
                  console.log(response);
                  defer.resolve(response);

              })
              .error(function(error){
                  console.error("The async call has fail");
              });
              return defer.promise();      
     }
});

Answer 3

myApp.service('testService',function($http)
{    
     this.getData = function()
     {
         **return** $http.get('data.json')
              .success(function(response) {
              // alert();
              console.log(response);
              obj.content = response;
         });

     }
});

angularjs显示从服务内部的json文件中获取数据

3 个答案: