Question

我尝试使用服务从服务器获取一些数据，但我遇到了一个问题：当我打印＆＃39; myData.length＆＃39;时，甚至控制台都会记录长度，当我试图查找长度时＆＃39; $ scope.test＆＃39;控制器变量它告诉我它是未定义的。

在我自己的服务中使用$ 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

在您的代码中，您不必等待$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 2

以这些服务和控制器为例，您应该在编写代码时遵循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 3

你从工厂发出的$ http调用是异步的，所以它不会等待，直到响应，它将继续执行下一次执行的脚本，这就是问题只有Weedoze的asnwer，这是正确的方法。

在我自己的服务中使用$ http - 变量不会持久存在

3 个答案: