AngularJS Factory and Parse.com User Authentication

Question

I am playing around with AngularJS using Parse.com as it's backend and am having an issue when I try go authenticate and deuthenticate with Parse. I am abe to do both these functions, but my views don't update.

app.factory('hsUser', ['$http', function($http){

  var dataObject = null;

  return {
    get: function()
    {
      var tmpData = Parse.User.current();
      console.log(tmpData);

      if(tmpData && dataObject == null)
      {
        dataObject = {};
        keys = Object.keys(tmpData);
        keys.forEach(function(value)
        {
          dataObject[value] = tmpData[value];
        });
        console.log(dataObject);
      }
      return dataObject;
    },

    authenticate: function(username, password)
    {
      console.log('auth');
      Parse.User.logIn(username, password, {
        success: function(userData) {
          dataObject = {};
          keys = Object.keys(userData);
          keys.forEach(function(value)
          {
            dataObject[value] = userData[value];
          });
        },
        error: function(userData, errorData) {
          console.log(errorData);
        }
      });
    },

    deauthenticate: function()
    {
      Parse.User.logOut();
      dataObject = Parse.User.current();
    },

    doRegister: function(registration)
    {
      console.log(registration);
      return {
        success: true
      }
    }
  }
}]);

Here are my controllers.

app.controller('HeaderController', ['hsConfig','hsUser', function( hsConfig, hsUser)
  {
    this.config = hsConfig.get();
    this.user = hsUser.get();
  }]);

app.controller('AuthController', ['hsUser', function( hsUser)
{
  this.user = hsUser.get();

  this.authUser = {
    emailAddress: "testinguser",
    password: "testinguser",
    remember: false,
  }

  this.authenticate = function()
  {
    hsUser.authenticate(this.authUser.emailAddress, this.authUser.password);
  }

  this.deauthenticate = function()
  {
    this.user = hsUser.deauthenticate();
    console.log('Deauthenticated')
  }

}]);

Here is the HTML for the directive that creates the navbar

<div class="header" ng-controller="HeaderController as headCtrl">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">{{ headCtrl.config.brand }}</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right" ng-hide="headCtrl.user">
          <li class="dropdown" ng-controller="AuthController as authCtrl">
            <a class="dropdown-toggle" href data-toggle="dropdown">
              Sign In
              <strong class="caret"></strong>
            </a>
            <div class="dropdown-menu auth-form-container" style="padding: 15px; padding-bottom: 0px;" >
              <form role="form" ng-submit="authCtrl.authenticate();">
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control" placeholder="Enter email" ng-model="authCtrl.authUser.emailAddress" >
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Password</label>
                  <input type="password" class="form-control" placeholder="Password" ng-model="authCtrl.authUser.password">
                </div>
                <div class="form-group checkbox">
                  <label>
                        <input type="checkbox" ng-model="authCtrl.authUser.remember"> Remember Me
                  </label>
                </div>
                <div class="form-group">
                  <button class="btn btn-primary btn-full">Sign In</button>
                </div>
              </form>
            </div>
          </li>
          <li class="divider-vertical"></li>
          <li><a href="/#/register">Register</a></li>
        </ul>        
        <ul class="nav navbar-nav navbar-right" ng-show="headCtrl.user">
          <li><a href="/#/sign-in">Profile</a></li>
          <li class="divider-vertical"></li>
          <li ng-controller="AuthController as authCtrl">
            <a href ng-click="authCtrl.deauthenticate();">Sign Out</a>
          </li>
        </ul>        
      </div>
    </div>
  </nav>
</div>

The entire project including Parse keys can be found here. I'll delete the keys once I figure out wtf my problem is.

https://github.com/thenetimp/hackerspace

If anyone can point me into what I am doing wrong and explain it so I can understand what I need to do with other Models I would greatly appreciate it.

Answer 1

whenever you update the model outside of angulars context, I.e in the callback of a promise, you need to use $scope.apply to notify angular.