Fatal编程技术网
  • angularjs/
  • AngularJs服务将空对象返回给控制器

AngularJs服务将空对象返回给控制器

angularjs

AngularJs服务将空对象返回给控制器,angularjs,Angularjs,我在控制器中调用服务方法以返回一个对象。我费了很大劲才弄清楚服务和工厂在实现上的确切区别 根据我所学的内容，service用new实例化，并将此返回给调用控制器 我在这里尝试实现同样的功能。在控制器中调用服务函数，并将返回的对象存储在控制器的$scope.user变量中，如下所示： 控制器： app.controller('LoginFormController',['$log','$scope','userAngService','userBean',function($log,$scope,

我在控制器中调用
服务
方法以返回一个对象。我费了很大劲才弄清楚
服务
和
工厂
在实现上的确切区别

根据我所学的内容，
service
用
new
实例化，并将
此
返回给调用控制器

我在这里尝试实现同样的功能。在控制器中调用
服务
函数，并将返回的对象存储在控制器的
$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;
}]);
服务：

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
变量

我可以让函数
返回这个。用户
但是仍然得到相同的结果

我应该在这里做什么更改

下面是我在控制台中得到的信息：

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

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
        });
    };
}]);
控制器正在记录一个空白对象，这是正确的，因为它是一个空白对象。你能试试这个吗

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
        });
    };
}]);
你的服务需要回报一个可怜的人。这应该起作用：

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

}]);
你的服务需要回报一个可怜的人。这应该起作用：

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

}]);
您正在通过
userAngService
服务内部调用
$http
服务

这是一个异步服务调用，因此，只需将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.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);
        };
    };
}]);
服务

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

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;
        });
    };
}]);
您正在通过
userAngService
服务内部调用
$http
服务

这是一个异步服务调用，因此，只需将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.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);
        };
    };
}]);
服务

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

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;
        });
    };
}]);
为了通过HTTP请求从服务中获取数据，您必须遵守用户承诺，因为当您的HTTP请求将响应返回给控制器时，并没有处理程序接收响应

控制器应为：

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

    };
}]);

app.service('userAngService',['$http','$log','$rootScope','$location', '$q',function($http,$log,$rootScope,$location,$q){
    this.user = {};
    this.login = function(val){
        var deferred = $q.defer();
        var promise = deferred.promise;
        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
            deferred.resolve(user);
        });
        return promise;
    };

    return this;
}]);
服务应为：

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

    };
}]);

app.service('userAngService',['$http','$log','$rootScope','$location', '$q',function($http,$log,$rootScope,$location,$q){
    this.user = {};
    this.login = function(val){
        var deferred = $q.defer();
        var promise = deferred.promise;
        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
            deferred.resolve(user);
        });
        return promise;
    };

    return this;
}]);
我还没有测试过这段代码，我认为它会对您有用，但如果不是这样，请让我知道。

您必须向用户承诺，才能通过HTTP请求从服务获取数据，因为当您的HTTP请求将响应返回给控制器时发生了什么，没有处理程序接收它

控制器应为：

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

    };
}]);

app.service('userAngService',['$http','$log','$rootScope','$location', '$q',function($http,$log,$rootScope,$location,$q){
    this.user = {};
    this.login = function(val){
        var deferred = $q.defer();
        var promise = deferred.promise;
        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
            deferred.resolve(user);
        });
        return promise;
    };

    return this;
}]);
服务应为：

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

    };
}]);

app.service('userAngService',['$http','$log','$rootScope','$location', '$q',function($http,$log,$rootScope,$location,$q){
    this.user = {};
    this.login = function(val){
        var deferred = $q.defer();
        var promise = deferred.promise;
        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
            deferred.resolve(user);
        });
        return promise;
    };

    return this;
}]);
我还没有测试过这段代码，我想它会对您有用，但如果不是这样，请让我知道。

服务

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

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;
        });
    };
}]);
首先，您不需要从
服务
返回任何内容。这是与
工厂
的区别之一。在
工厂中
您需要返回一个对象，但不需要在
服务中返回任何对象

控制器

    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.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);
        };
    };
}]);
服务

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

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;
        });
    };
}]);
首先，您不需要从
服务
返回任何内容。这是与
工厂
的区别之一。在
工厂中
您需要返回一个对象，但不需要在
服务中返回任何对象

控制器

    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.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);
        };
    };
}]);
我也试过返回
这个
。还是一样的结果。我也在我的问题中更新了它。我也试着返回
这个
。还是一样的结果。我在我的问题中也对其进行了更新。两者都不起作用！：\第一种方法后得到相同的空白对象，第二种方法后出现错误。两种方法都不起作用！：\第一种方法得到相同的空白对象，第二种方法得到错误。谢谢你的回答。但是你能解释一下我的服务代码到底出了什么问题吗？由于success函数只是返回代码中的用户对象，因此success函数肯定会将用户对象返回给控制器，但这需要一些时间。在此期间，主线程将为
$scope.user
（未定义）分配值并退出程序循环。我尝试了您在此处建议的
$scope.login=function（val）{userAngService.login（val）；setTimeout（function（）{$scope.user=userAngService.user；console.log（$scope.user）；}，（5*1000）；}
但它仍然在控制台中记录空白对象。在这里，我绕过了更新
服务中的用户对象所需的时间。在成功函数中，在您的服务中为
分配值。user
而不是
user
感谢您的回答。但是您能解释一下我的服务到底出了什么问题吗e code？由于success函数在您的代码上返回用户对象，success函数肯定会将用户对象返回给控制器，但这需要一些时间。在此期间，主线程将为
$scope.user
（未定义）赋值并将退出程序循环我尝试了您在这里建议的方法，即
$scope.login=function（val）{userAngService.login（val）；setTimeout（function（）{$scope.user=userAngService.user；console.log（$scope.user）；}，（5*1000）；}；
但它仍然在控制台中记录空白对象。在这里，我绕过了在成功函数中对您的服务更新
服务中的用户对象所需的时间，将值分配给
此。用户
而不是
用户
此处为什么我需要返回
用户
变量？如果