在多个控制器中使用AngularJs Service

Question

我在这里挣扎着角。 我学到的是模块的工厂和服务功能只创建一个对象的一个​​实例，它将属性（函数和变量）与它相关联。 并且该实例可在整个应用程序的控制器中使用。

在我的应用程序中，我创建了一个服务模块userAngService ，如下所示：

var ser = angular.module('userAngService',[]);

ser.service('userAngService',['$cookies','$location','$http','$log','$rootScope',function($cookies,$location,$http,$log,$rootScope){
    this.user = {};
    $rootScope.username = {};
    $rootScope.user = {};

    /*this.loadUserData = function(username){
        return $http({
            method: 'GET',
            url: 'http://localhost:7070/storyBoard/webapi/profiles/'+username
        }).success(function(data){
            user = data.data;
            //return user;
        });
    };*/

    this.login = function(val){
        return $http({
            method: 'GET',
            url: 'http://localhost:7070/storyBoard/webapi/stories?username='+val.username+'&password='+val.password
        }).then(function(data){
            if(data.data==="Success"){
                $rootScope.username = val.username;
                $cookies.put("username", val.username);
                $http({
                    method: 'GET',
                    url: 'http://localhost:7070/storyBoard/webapi/profiles/'+val.username
                }).success(function(data){
                    console.log(data);
                    this.user = data;
                    console.log(this.user);
                });
                $location.path("/home");
            }else{
                window.alert('Wrong username or password');
            }
        });
    };

    this.logout = function(){
        $rootScope.user.username = "";
        $cookies.remove("username");
        $location.path("/Diary");
    };

    this.addToShelf = function(wsPublish){
        wsPublish.author = $rootScope.user.username;
        return $http({
            method: 'POST',
            url:'http://localhost:7070/storyBoard/webapi/stories',
            data: wsPublish
        }).then(function(data){
            this.user.stories.push(data.data);
        });
    };
}]);

它包含3个函数和私有变量this.user和2个rootScope变量$rootScope.username ＆ $rootScope.user 。 我们关心的函数是this.login()函数。

现在，

要使用此服务模块，我创建了一个模块AllControllers ：

 var app = angular.module('AllControllers',['userAngService']);

我用它关联了2个控制器 。

第一控制器：

app.controller('LoginFormController',['$cookies','$rootScope','$log','$scope','userAngService','userBean',function($cookies,$rootScope,$log,$scope,userAngService,userBean){

    $scope.login = function(val){
        userAngService.login(val);
    };

    $scope.logout = function(){
        userAngService.logout();
    };

    $scope.publishGroup = function(obj){
        userBean.publishGroup(obj);
    };
}]);

*此控制器注入了userAngService依赖userAngService ，它的login()函数委托调用login() function of userAngService服务的login() function of userAngService

userAngService的login()函数更改其私有变量属性。 然后我试图在另一个控制器中使用，这就是所有问题所在。 当我在userAngService本身记录返回的promise数据时，它已成功记录但是当我尝试访问另一个控制器时，它只记录一个空对象

第二个控制器（从那里访问服务的私有变量）：

 app.controller('ReachController',['$cookies','$scope','$rootScope','userAngService',function($cookies,$scope,$rootScope,userAngService){
    $scope.user = {};
    $scope.username = {};

    $scope.user = userAngService.user;
    console.log(userAngService.user);
    $scope.username = $cookies.get("username");

    /*userAngService.loadUserData($scope.username).then(function(data){
        $scope.user = data.data;
        console.log($scope.user);
    });*/

    console.log($scope.user);
    console.log($rootScope.user);

    $scope.logout = function(){
        userAngService.logout();
    };

    $scope.addToShelf = function(wsPublish){
        userAngService.addToShelf(wsPublish);
    };
}]);

那么一个空对象只能意味着对象属性被定义为null并且不会被login()函数更新。 但是，在userAndService success回调;

console.log(data);
this.user = data;
console.log(this.user);

这些代码行成功记录返回的数据，而在ReachController或Second Controller的行中;

$scope.user = userAngService.user;
...
console.log($scope.user);

将此记录到控制台：

Object {}

没有错误，所以代码是正确的，但在概念上我猜错了。 请帮忙！

Answer 1

如果要返回数据使用工厂而不是服务。

服务始终返回包含数据的方法。

console.log(data);
this.user = data;
console.log(this.user); 

“this”对象用于Success函数的局部范围。 它将覆盖服务“this”对象。

Answer 2

我的猜测是问题在于服务和父模块的命名 - userAngService 。 尝试将模块重命名为userAngServiceModule 。 当你向userAngService添加依赖时，无论你是指模块还是服务，我都希望angular的DI会混淆。

Answer 3

在this背景下诺言里面.then处理程序是不一样的this服务的环境。

app.service("myService", function($http) {
    var myService = this;
    this.data = {};

    this.fetch = function(url) {
        //return promise 
        return (
            $http.get(url).then (function onFulfilled(response) {
                //Won't work
                //this.data = response.data;

                //Instead use the binding
                myService.data = response.data;
                //Return data for chaining
                return myService.data;
            }).catch (function onRejected(response) {
                console.log(response.status);
                //throw to chain rejection
                throw response;
            });
        );
    };
});

在this背景下的onFulfilled的功能是不一样的this服务的环境。 相反，结合this服务的情况下，以一个变量并使用该变量在onFulfilled承诺的功能.then方法。

另外要注意， this.data服务的变量被用在XHR之后的某个时间设定在未来 $http服务完成。 要确保数据可用，请使用fetch函数返回的promise。

在控制器中

var promise = myService.fetch(url);

promise.then (function onFulfilled(data) {
    $scope.data = data;
}).catch( function onRejected(errorResponse) {
    console.log(errorResponse.status);
});