angular service variable undefined

Question

I am trying to use a service to access the current user variable from another controller. Here is my code:

Service:

angular.module('app').factory('AuthService', function ($http) {
  var currentUser;
});

Controller 1:

angular.module('app').controller('Signup', function ($scope, AuthService) {
  AuthService.currentUser = "test@email.com"
});

Controller 2:

angular.module('app').controller('Login', function ($scope, AuthService) {
  $scope.user = AuthService.currentUser;
});

View:

<body ng-controller="Login" ng-cloak>
  <button class="btn btn-link navbar-btn pull-right">{{user}}</button>
</body>

From looking at dev tools within chrome I can see that "user" is undefined. Any thoughts?

score 3 · Accepted Answer · answered Nov 11 '15 at 17:34

3

A factory is supposed to return a function or object that constitutes the service. Your factory defines a local variable, and doesn't return anything. So the service is, actually, undefined.

It should be:

angular.module('app').factory('AuthService', function () {
  return {
    currentUser: null;
  }
});

answered Nov 11 '15 at 17:34

JB Nizet

678,734
91
1,224
1,255

Thank you for the answer. In the real application (I slimmed it down to highlight the issue) this is not working for me. I believe the problem is related to nested scoping. In other words, I don't think currentUser is populated yet when my app looks for it. Here's the full code of my app if you would be so kind to look at it. – CiscoKidx Nov 11 '15 at 17:53
Your answer combined with this SO question resolved the issue. http://stackoverflow.com/questions/15380140/service-variable-not-updating-in-controller?rq=1 – CiscoKidx Nov 11 '15 at 18:13

score 1 · Answer 2 · answered Nov 11 '15 at 17:40

1

Change the service is as below. The problem occurs because the variable in question is not visible. To expose data you should return an object containing all the methods and variables you want to share . Just be CAREFUL! It is a good practice to share variables. Use get and set methods for that. Directly to the variable behavior can lead to problematic as the system grows.

angular.module('app').factory('AuthService', function ($http) {
   var currentUser = "";
   return {
       setUser : function(user){
           currentUser = user;
       },
       getUser : function(){
           return currentUser;
       }
   };
});

answered Nov 11 '15 at 17:40

Emir Marques

2,603
2
16
22

Introducing such get/set methods will result in multiple currentUser objects, I dont think this is good. – Petr Averyanov Nov 11 '15 at 17:44
Imagine the situation seguite whenever the user is setted should be turned a routine to validate the access permission . Before you set the value , you run a method to perform the validation. If you direct access to the variable it will be necessary to duplicate the validation routine before each call . I say it is not a bo practice because the responsibility for maintaining the user control should be in service. The ideal and perfect would be to create a module part to control the current user . A AppUserCurrent for example. – Emir Marques Nov 11 '15 at 17:49

angular service variable undefined

2 Answers2