从单独的控制器angularjs中检索成功后的数据

时间:2017-07-13 17:11:13

标签: angularjs json angularjs-service angularjs-controller angularjs-http

我正在编写一个简单的服务,上传文件并将其发布到Spring控制器。控制器操纵此数据并将多个对象作为JSON返回。 我正在使用以下Angular服务:

myApp.service('fileUpload', [ '$http', function($http) {
        this.uploadFileToUrl = function(file, uploadUrl) {
            var fd = new FormData();
            fd.append('file', file);

            $http.post(uploadUrl, fd, {
                transformRequest : angular.identity,
                headers : {
                    'Content-Type' : undefined
                }
            })

            .success(function(data) {
                console.log("upload successful")
                //console.log(data)
                namesandaddresses = data;
            })

            .error(function() {
                console.log("upload error")
            });
        }
    } ]);

我在代码中有一个单独的控制器,我想用它将这些数据(名称和地址)发布到视图中,并使用ng-repeat显示信息。我现在的斗争是将数据拉到这个成功函数之外,更不用说服务本身了。我已经尝试在服务外部创建一个全局var namesandaddresses,以便我可以从另一个控制器访问它,但它显示为未定义。

从我的研究中我发现,执行此操作的适当方法是使用回调函数,但我尝试将其写入服务会破坏基本功能。在重新设计此服务或重新考虑我的方法之前,我想发布此信息,看看stackoverflow社区是否可以帮助我调整此服务,以便我可以在成功时将此JSON发布到视图中。

有人会帮我一把吗?

1 个答案:

答案 0 :(得分:1)

很容易。

控制器:

fileUpload.uploadFileToUrl (file,uploadUrl, {
            successCallBack: yourSuccessHandler,
            failureCallBack: yourFailureHandler
        });

function yourSuccessHandler(data) {
            $scope.data= data; 
        }

function yourFailureHandler() {
            console.log("Failed Messge printing from Controller"); 
        }

服务

myApp.service('fileUpload', [ '$http', function($http) {
        this.uploadFileToUrl = function(file, uploadUrl, options) {
            var fd = new FormData();
            fd.append('file', file);

            $http.post(uploadUrl, fd, {
                transformRequest : angular.identity,
                headers : {
                    'Content-Type' : undefined
                }
            })

            .success(function(data) {
                console.log("upload successful");
                if(options && options.successCallBack) {
                    return options.successCallBack(data);
                }
            })

            .error(function() {
                console.log("upload error");
                if(options && options.failureCallBack) {
                    return options.failureCallBack();
                }
            });
        }
    } ]);