Angular passing data from factory to controller

Question

I'm trying to store an authorized user id variable, which I can pass to controllers. I know there's an issue with how I'm trying to pass the data from inside the closure of my factory object, but I'm stuck on how to fix it.

Here is my factory:

myApp.factory('Authentication', function($firebase, 
  $firebaseAuth, FIREBASE_URL, $location) {

  var ref = new Firebase(FIREBASE_URL);
  var simpleLogin = $firebaseAuth(ref);

  var authorized;

  var myObject = {
    login : function() {
    return simpleLogin.$authAnonymously().then(function(authData) {
    authorized = authData.uid;
  console.log("Logged in as:", authData.uid);
}).catch(function(error) {
  console.error("Authentication failed:", error);
});
    },
    auth : authorized
  } //myObject

  return myObject;
});

Here is my controller:

myApp.controller('MeetingsController', 


function($scope, $firebase, Authentication) {

  var ref = new Firebase('http://i2b2icons.firebaseio.com/');
  var meetings = $firebase(ref);

  $scope.authid = Authentication.auth;

  $scope.meetings = meetings.$asObject();
//  $scope.id = = Authentication.login.id;  
  $scope.addMeeting=function() {
    meetings.$push({
      name: $scope.meetingname,
      date: Firebase.ServerValue.TIMESTAMP
    }).then(function() {
      $scope.meetingname = '';
    });
  } //addmeeting

  $scope.deleteMeeting=function(key) {
    meetings.$remove(key);
  } //deletemeeting

}); //MeetingsController

I'm really just trying to get the $scope.authid variable to pick up the value of auuthorized from the the login function of myObject.

The login method should have been called already by logging in via this controller:

myApp.controller('RegistrationController', 


function($scope, $firebaseAuth, $location, Authentication) {


  $scope.login = function() {
    Authentication.login();
  } //login


}); //RegistrationController

Authentication.auth` is only set inside `Authentication.login`, a function that you are not calling. — Sergiu Paraschiv, Jan 22 '15 at 15:06

PSL · Accepted Answer · 2015-01-22T15:15:55.967

You are just setting the local variable authorized in your factory, it has no relation to the Authentication.auth that you are trying to access in your controller (unless ofcourse you set the value to it while creating the factor and which is not the intention anyway). Instead return a predefined object in your factory and return that object from it. Set the property on the object reference.

myApp.factory('Authentication', function($firebase, 
      $firebaseAuth, FIREBASE_URL, $location) {

    var ref = new Firebase(FIREBASE_URL);
    var simpleLogin = $firebaseAuth(ref);
    //Predefine the factory
    var factory = {
       login: login,
       authorized: null
    };

    function login() {
       return simpleLogin.$authAnonymously().then(function(authData) {
          factory.authorized = authData.uid; //Set the property here
      }).catch(function(error) {});
    } 
   //return it
   return factory;
});

With this provided you have the reference of the factory and updates to its property will reflect (provided you invoke the method that populates the data) in your controller. Another way would be to use a getter function in your factory to return the auth object, or you can as well cache the promise returned by login function and return it and invalidate it when an event occurs that log the user out.

Thank you! that makes a lot of sense and clears a lot of things up. — byrdr, Jan 22 '15 at 15:14

score 0 · Answer 2 · answered Jan 22 '15 at 15:24

As others have already pointed out you only update the variable authorized, not the property auth. One rather simple solution is to change authto a getter, that always returns the current value:

var myObject = {
  login : function() {
    ...
  },
  get auth() {
    return authorized;
  }

You don't have to change any other code.

Angular passing data from factory to controller

2 Answers2

Linked