Question

我在控制器中调用service方法来返回一个对象。我努力找出service和factory之间的确切实现差异。

根据我学到的service实例化new并将this返回给调用控制器。

我正在尝试完成相同的操作。在控制器中调用service函数并将返回的对象存储在控制器的$scope.user变量中，如下所示：

控制器：

app.controller('LoginFormController',['$log','$scope','userAngService','userBean',function($log,$scope,userAngService,userBean){
    $scope.user = {};
    $scope.login = function(val){
        userAngService.login(val);
        $scope.user = userAngService.user;   //accessing service's user variable
        //$scope.user = userAngService.user;
        console.log($scope.user);    //empty object being logged in console
    };
}]);

服务

app.service('userAngService',['$http','$log','$rootScope','$location',function($http,$log,$rootScope,$location){
    this.user = {};
    this.login = function(val){
        console.log('from angular service');
        $http({
            method: 'GET',
            url: 'http://localhost:7070/messenger/webapi/messages'
        }).success(function(data){
            user = data;
            console.log(user);   //successfully logging "user" in console
        });
    };

    return this;
}]);

在服务的上方，login function(val)正在更改服务本身中定义的user变量。

我可以将功能设为return this.user，但结果仍然相同。

我应该在这做什么改变？

以下是我在控制台中获得的内容：

Answer 1

您正在$http服务内部拨打userAngService服务。

它是一个异步服务调用，只需将promise对象返回给控制器，然后将值赋给$scope.user。

<强>控制器

    app.controller('LoginFormController',     ['$log','$scope','userAngService','userBean',function($log,$scope,userAngService,userBean){        
    $scope.login = function(val){
        userAngService.login(val).then(function(data){
            $scope.user = data;
            console.log($scope.user);                
        });         
    };
}]);

<强>服务

app.service('userAngService',['$http','$log','$rootScope','$location',function($http,$log,$rootScope,$location){
    this.user = {};
    this.login = function(val){
        console.log('from angular service');
        return $http({
            method: 'GET',
            url: 'http://localhost:7070/messenger/webapi/messages'
        });
    };           
}]);

Answer 2

<强>服务

app.service('userAngService',['$http','$log','$rootScope','$location',function($http,$log,$rootScope,$location){
    this.user = {};
    this.login = function(val){
        console.log('from angular service');
        // here you are returning Promise
        return $http({
            method: 'GET',
            url: 'http://localhost:7070/messenger/webapi/messages'
        }).success(function(data){
            user = data;
            console.log(user);   //successfully logging "user" in console

            return user;
        });
    };
}]);

首先，您不需要从service返回任何内容。这是与factory的区别之一。在factory中，您需要返回一个对象，但不需要返回service中的任何对象

<强>控制器

app.controller('LoginFormController',['$log','$scope','userAngService','userBean',function($log,$scope,userAngService,userBean){
    $scope.user = {};
    $scope.login = function(val){
        userAngService.login(val).then(userName){
               $scope.user = userName;
               console.log($scope.user);
        };
    };
}]);

Answer 3

您的控制器正在记录一个正确的空白对象，因为它是一个空白对象。你能试试吗？

app.service('userAngService',['$http','$log','$rootScope','$location',function($http,$log,$rootScope,$location){
    var vc = this;
    vc.user = {};
    vc.login = function(val){
        console.log('from angular service');
        $http({
            method: 'GET',
            url: 'http://localhost:7070/messenger/webapi/messages'
        }).success(function(data){
            vc.user = data;
            console.log(user);   //successfully logging "user" in console
        });
    };
}]);

或者这......

app.service('userAngService',['$http','$log','$rootScope','$location',function($http,$log,$rootScope,$location){
    var vc = this;
    vc.user = {};
    vc.login = function(val){
        console.log('from angular service');
        $http({
            method: 'GET',
            url: 'http://localhost:7070/messenger/webapi/messages'
        }).success(function(data){
            $rootScope.$apply(function(){vc.user = data;});
            console.log(user);   //successfully logging "user" in console
        });
    };
}]);

Answer 4

您的服务需要退回。这应该有效：

app.service('userAngService',['$http','$log','$rootScope','$location',function($http,$log,$rootScope,$location){
this.user = {};
this.login = function(val){
    console.log('from angular service');
    $http({
        method: 'GET',
        url: 'http://localhost:7070/messenger/webapi/messages'
    }).success(function(data){
        user = data;
        console.log(user);   //successfully logging "user" in console
    });
};

return this; 
}]);

或者如果你想在javascript中使用私有和公共功能（模块模式）。做：

    app.service('userAngService',['$http','$log','$rootScope','$location',function($http,$log,$rootScope,$location){

var user = {};

var handleRequestData = function(data){
    user = data;
    console.log(user);   //successfully logging "user" in console
};

var login = function(val){
    console.log('from angular service');
    $http({
        method: 'GET',
        url: 'http://localhost:7070/messenger/webapi/messages'
    }).success(handleRequestData);
};

/* while you returning just the login function, user and handleRequestData stay private */
return {
    login: login
};

}]);

Answer 5

您必须使用用户承诺才能通过HTTP请求从服务获取数据，因为当您的http请求将响应发送回控制器时发生的情况是没有处理程序来接收它。

控制器应该是：

$images_per_row

服务应该是：

app.controller('LoginFormController',['$log','$scope','userAngService','userBean',function($log,$scope,userAngService,userBean){
    $scope.user = {};
    $scope.login = function(val){
        userAngService.login(val).then(function(res){
            $scope.user = res;   
        //$scope.user = userAngService.user;
        console.log($scope.user);
        console.log(userAngService.user);
        });

    };
}]);

我没有测试过这段代码，我觉得它会对你有用但如果不是这样的话请告诉我。

AngularJs服务将null对象返回到控制器

5 个答案: