AngularJS Service Passing Data Between Controllers

Question

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

});

score 27 · Accepted Answer · edited May 23 '17 at 12:08

27

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?

edited May 23 '17 at 12:08

Community

1
1

answered Jul 30 '13 at 17:10

Josh Petitt

9,371
12
56
104

Thanks @Josh-Petitt. I'm still getting undefined but I'm now thinking it's because on the second page I transition which is a full HTML document I have a ng-app directive in the html element. So I'm guessing this is what is clearing out the service data? Does that sound correct? – AquaLunger Jul 30 '13 at 17:41
Maybe, its hard to say without looking at the whole app. FWIW, here is an AngularJS project I have been working on to learn. You might poke around the app/user directory and see how I implemented it. I am able to use the userService on different pages. https://github.com/jpmec/done – Josh Petitt Jul 30 '13 at 17:58
@user1093077 Hi, Did you get the work around of your solution. I am having same problem at: http://stackoverflow.com/questions/20118335/angular-dependency-injection-passing-values-between-modules-using-service – Siddharth Srivastva Nov 21 '13 at 12:42

AngularJS Service Passing Data Between Controllers

1 Answers1

Linked