AngularJS controller init

Question

Angular JS Newbie: I get the gapi is not defined because sydney.userAuthed is called before the API is loaded. But I don't understand why the method sydney.auth is called when the controller is created. I get the error when the page loads, there is no user interaction.

calling auth api.js:22
ReferenceError: gapi is not defined
    at Object.sydney.userAuthed (http://localhost:8888/js/api.js:36:8)
    at Object.sydney.auth (http://localhost:8888/js/api.js:23:30)
    at new LoginController (http://localhost:8888/js/controllers.js:8:24)
    at invoke (http://localhost:8888/lib/angular/angular.js:2902:28)
    at Object.instantiate (http://localhost:8888/lib/angular/angular.js:2914:23)
    at http://localhost:8888/lib/angular/angular.js:4805:24
    at updateView (http://localhost:8888/lib/angular/angular-ui-router.js:931:30)
    at <error: illegal access>
    at Object.Scope.$broadcast (http://localhost:8888/lib/angular/angular.js:8307:28)
    at $state.transition.resolved.then.$state.transition (http://localhost:8888/lib/angular/angular-ui-router.js:747:20) angular.js:5754
OAuth2 API loaded api.js:13

I defined a state with ui-router as:

myapp.config(function($stateProvider, $routeProvider) {

    $stateProvider.state('signin', {
        url : "/", // root route
        views : {
            "signinView" : {
                templateUrl : 'partials/signin.html',
                controller: 'LoginController'
            }
        },
    })

The controller is defined as:

function LoginController($scope, $state) {
  $scope.auth = sydney.auth($state);
}

sydney.auth method is used to authenticate a user using Google APIs Client Library for JavaScript.

var sydney = sydney || {};

sydney.auth = function($state) {
    console.log("calling auth");
    sydney.signin(false, sydney.userAuthed($state));
}

sydney.signin = function(mode, callback) {
      gapi.auth.authorize({client_id: sydney.CLIENT_ID,
        scope: sydney.SCOPES, immediate: mode,
        response_type: 'token id_token'},
        callback);
      console.log("signin called");
}

sydney.userAuthed = function($state) { 
      var request =
          gapi.client.oauth2.userinfo.get().execute(function(resp) {
        if (!resp.code) {
          var token = gapi.auth.getToken();
          token.access_token = token.id_token;
          gapi.auth.setToken(token);
          // User is signed in, call my Endpoint
          gapi.client.realestate.owner.create().execute(function(resp) {
              alert("Signed In");
              $state.transitionTo("signedin");
            });
        }
      });
    }

EDIT

The correct answer is to define $scope.auth as a function:

function LoginController($scope, $state) {
  $scope.auth = function() { 
      sydney.auth($state);
  }
}

Do you have a plunker for this? You can try to add gapi to function variables like this function($state, gapi) — pasine
– pasine, Commented Jun 29, 2013 at 18:16

rmunn · Accepted Answer · 2013-06-29 18:18:36Z

1

It seems what you're trying to do is make the sydney.auth function available from your scope. If so, you should change your LoginController to:

function LoginController($scope, $state) {
  $scope.auth = sydney.auth;
}

What your code was doing was calling the sydney.auth function and setting $scope.auth to its return value, which is not what I think you intended.

answered Jun 29, 2013 at 18:18

rmunn

37k11 gold badges80 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sydney Over a year ago

Answer accepted because it helped me to find the right solution. Question edited with the correct answer.

Collectives™ on Stack Overflow

AngularJS controller init

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related