AngularJS服务传递控制器之间的数据 [英] AngularJS Service Passing Data Between Controllers

问题描述

当使用AngularJS服务来试图和两个控制器之间传递数据，试图从服务访问数据时，我的第二个控制器总是收到不确定的。我猜这是因为第一个服务做了$ window.location.href，我想这在服务中清除出来的数据？有我的方式将URL更改为新的位置，并保持在第二个控制器的服务的数据持久化？当我运行警报低于code。在第二个控制器始终是不确定的。

app.js（如果服务被定义）

  VAR应用= angular.module（'SetTrackerApp'，['$ strap.directives'，'ngCookies']）;的app.config（函数（$ routeProvider）
{
$ routeProvider
  。当（'/应用程序'，{templateUrl：'谐音/ addset.html'，控制器：'SetController'}）
  。当（'/ profile文件'，{templateUrl：'谐音/ profile.html'，控制器：'ProfileController可'}）
  不然的话（{templateUrl：/partials/addset.html'，控制器：'SetController'}）;
}）;app.factory（'userService'，函数（）{
VAR用户数据= [
    {yearSetCount：0}
];返回{
    用户：函数（）{
        返回用户数据;
    }，
    setEmail：功能（电子邮件）{
        userData.email =电子邮件;
    }，
    getEmail：功能（）{
        返回userData.email;
    }，
    setSetCount：功能（setCount）{
        userData.yearSetCount = setCount;
    }，
    getSetCount：功能（）{
        返回userData.yearSetCount;
    }
};
}）;
 

logincontroller.js：（控制器1它设置在服务价值）

  app.controller（'的LoginController'，函数（$范围，$ HTTP，$窗口，userService）{$ scope.login =功能（）{
    $ HTTP（{
        方法：POST，
        网址：'/登录'，
        数据：$ scope.user
    }）。成功（功能（数据）{
        userService.setEmail（取得foobar）;
        $ window.location.href ='/应用程序
    }）错误（功能（数据）{
        $ scope.login.error = TRUE;
        $ scope.error =数据;
    }）;
}
}）;
 

appcontroller.js（第二控制器试图读取从服务价值）

  app.controller（'AppController的'，函数（$范围，$ HTTP，userService）{$ scope.init =功能（）{
    警报（在初始化用户名：userService.getEmail（））;
}}）;
 

解决方案

定义你的服务这样的

  app.service（'userService'，函数（）{
  this.userData = {yearSetCount：0};  this.user =功能（）{
        返回this.userData;
  };  this.setEmail =功能（电子邮件）{
        this.userData.email =电子邮件;
  };  this.getEmail =功能（）{
        返回this.userData.email;
  };  this.setSetCount =功能（setCount）{
        this.userData.yearSetCount = setCount;
  };  this.getSetCount =功能（）{
        返回this.userData.yearSetCount;
  };
}）;
 

下面看看邓肯的回答是：

<一个href=\"http://stackoverflow.com/questions/17933321/angularjs-what-are-the-major-differences-in-the-different-ways-to-declare-a-se\">AngularJS - 什么是在不同方式的角度来声明一个服务的主要区别

？

When using an AngularJS service to try and pass data between two controllers, my second controller always receives undefined when trying to access data from the service. I am guessing this is because the first service does a $window.location.href and I'm thinking this is clearing out the data in the service? Is there a way for me to change the URL to a new location and keep the data persisted in the service for the second controller? When I run the code below the alert in the second controller is always undefined.

app.js (Where Service is Defined)

var app = angular.module('SetTrackerApp', ['$strap.directives', 'ngCookies']);

app.config(function ($routeProvider) 
{
$routeProvider
  .when('/app', {templateUrl: 'partials/addset.html', controller:'SetController'})
  .when('/profile', {templateUrl: 'partials/profile.html', controller:'ProfileController'})
  .otherwise({templateUrl: '/partials/addset.html', controller:'SetController'});
});

app.factory('userService', function() {
var userData = [
    {yearSetCount: 0}
];

return {
    user:function() {
        return userData;
    },
    setEmail: function(email) {
        userData.email = email;
    },
    getEmail: function() {
        return userData.email;
    },
    setSetCount: function(setCount) {
        userData.yearSetCount = setCount;
    },
    getSetCount: function() {
        return userData.yearSetCount;
    }
};
});

logincontroller.js: (Controller 1 which sets value in service)

    app.controller('LoginController', function ($scope, $http, $window, userService) {

$scope.login = function() {
    $http({
        method : 'POST',
        url : '/login',
        data : $scope.user
    }).success(function (data) {
        userService.setEmail("foobar");
        $window.location.href = '/app'
    }).error(function(data) {
        $scope.login.error = true;
        $scope.error = data;
    });
}
});

appcontroller.js (Second controller trying to read value from service)

app.controller('AppController', function($scope, $http, userService) {

$scope.init = function() {      
    alert("In init userId: " userService.getEmail());
}

});

解决方案

Define your service like this

app.service('userService', function() {
  this.userData = {yearSetCount: 0};

  this.user = function() {
        return this.userData;
  };

  this.setEmail = function(email) {
        this.userData.email = email;
  };

  this.getEmail = function() {
        return this.userData.email;
  };

  this.setSetCount = function(setCount) {
        this.userData.yearSetCount = setCount;
  };

  this.getSetCount = function() {
        return this.userData.yearSetCount;
  };
});

Check out Duncan's answer here:

AngularJS - what are the major differences in the different ways to declare a service in angular?

这篇关于AngularJS服务传递控制器之间的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！