javascript - 在多个 Controller 中使用 AngularJs 服务

Question

我在这里与 Angular 作斗争。我了解到，模块的工厂和服务函数仅创建一个与其关联属性(函数和变量)的对象实例。该实例在应用程序的整个 Controller 中都可用。

在我的应用程序中，我创建了一个服务模块 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个函数和私有(private)变量this.user和 2 个 rootScope 变量 $rootScope.username & $rootScope.user 。我们关心的函数是this.login()功能在这里。

现在，

为了使用此服务模块，我创建了一个模块 AllControllers :

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

我将 2 个 Controller 与其关联起来。

第一个 Controller :

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

*此 Controller 注入(inject)了 userAngService 的依赖项它是login()函数委托(delegate)调用 login() function of userAngService服务

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

第二个 Controller (从中访问服务的私有(private)变量):

 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中或第二控制员的台词；

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

将其记录到控制台:

Object {}

没有错误，所以代码是正确的，但我猜概念上有问题。请帮忙!

Answer 1

如果您想返回数据，请使用工厂而不是服务。

服务总是返回带有数据的方法。

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

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