Блог

У меня есть файл 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;      
     }
});
  

Но в консоли входа в контроллер у меня есть return: Object {content: null} .
Данные загружаются правильно, потому что в сервисе я получаю правильный объект и данные. Итак, как я могу передать данные контроллеру?
Также этот пример все еще работает, когда я возвращаю данные из массива php, а затем передаю их как json_encode?

Вы не можете выполнить возврат внутри обратного вызова, он асинхронный, и в то время, когда приходит ответ от сервера, функция уже завершена, и вы потеряете поток.

Вместо этого вам нужно использовать обещания. Итак, из службы вы возвращаете обещание контроллеру, и когда приходит ответ, в контроллере будет запущен обратный вызов. Вот так:

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

Вы также можете связать обещания, на случай, если вы хотите что-то сделать с данными в сервисе. Подробнее об этом в документах о сервисе $ q.

Вы выполняете асинхронный вызов, поэтому вам следует дождаться обратного вызова.

Измените свой код на:

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

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

     }
});