Использование $ http внутри моей собственной службы - переменная не сохраняется

Question

Я пытаюсь использовать службу, чтобы получить некоторые данные с сервера, но у меня была проблема: даже консоль вышла из строя, когда я печатаю «myData.length», когда я пытаюсь найти длину переменной контроллера $ scope.test, скажите мне, что она не определена.

Что мне нужно сделать, чтобы использовать службу $ http внутри моего собственного сервиса?

app.controller('mainCtrl', ['$scope', 'mapServ', 
function($scope, mapServ) { 
    $scope.test = []; 
    $scope.test = mapServ.test; 
    console.log('$scope.test = ' + $scope.test.length); 
}]); 

app.factory('mapServ', ['$http', function ($http) { 
    var path = "file path to my server data"; 
    var out = {}; 
    var myData = []; 
    out.test = $http.get(path).then(function (response) { 
      myData = response.data; 
      console.log(myData.length); 
    }); 
    return out; 
}]); 

Answer 1

Возьмите эти службы и контроллер в качестве примера, и вы должны следовать за John Papa's style guide при написании кода.

служба

(function() { 
      'use strict'; 

      angular 
       .module('appName') 
       .factory('appAjaxSvc', appAjaxSvc); 

      appAjaxSvc.$inject = ['$http', '$q']; 

      /* @ngInject */ 
      function appAjaxSvc($http, $q) { 

       return { 
        getData:function (path){ 

         //Create a promise using promise library 
         var deferred = $q.defer(); 

         $http({ 
          method: 'GET', 
          url: "file path to my server data" 
         }). 
         success(function(data, status, headers,config){ 
          deferred.resolve(data); 
         }). 
         error(function(data, status, headers,config){ 
          deferred.reject(status); 
         }); 

         return deferred.promise; 
        }, 
       }; 
      } 
     })(); 

Контроллер

(function() { 

     angular 
      .module('appName') 
      .controller('appCtrl', appCtrl); 

     appCtrl.$inject = ['$scope', '$stateParams', 'appAjaxSvc']; 

     /* @ngInject */ 
     function appCtrl($scope, $stateParams, appAjaxSvc) { 
      var vm = this; 
      vm.title = 'appCtrl'; 

      activate(); 

      //////////////// 

      function activate() { 

       appAjaxSvc.getData().then(function(response) { 
        //do something 
       }, function(error) { 
        alert(error) 
       }); 

      } 
     } 
    })(); 

Answer 2

В своем коде вы не ждите, что $http закончил.

$http асинхронный вызов

Вы должны сделать это так

app.controller('mainCtrl', ['$scope', 'mapServ', 
    function($scope, mapServ) { 
     $scope.test = []; 
     $scope.test = mapServ.test.then(function(response) { 
      console.log(response.data); 
     }, function(error) { 
      //handle error 
     });; 
    } 
]); 

app.factory('mapServ', ['$http', function($http) { 
    var path = "file path to my server data"; 
    var out = {}; 
    var myData = []; 
    out.test = $http.get(path); 
    return out; 
}]); 

Answer 3

$ HTTP называют, что вы делаете с завода является асинхронным, так не будет ждать, пока ответ не придет, его перейдёт к следующему исполнению скрипта, то есть проблема только в том, чтобы попробовать использовать Weedoze, это правильный способ сделать это.