2012-08-19 23 views
13

Estoy tratando de crear un servicio de Facebook para Angular para que pueda probar más fácilmente el código que necesita usar Facebook JS SDK y Graph API para cosas.Inyectando el SDK JS de Facebook en Controladores AngularJS

Esto es lo que tengo hasta ahora:

app.factory('facebook', function() { 
    return FB; 
}); 

window.fbAsyncInit = function() { 
    FB.init({ 
     appId: 'SOME_APP_ID_HERE', // App ID 
     status: true, // check login status 
     cookie: true, // enable cookies to allow the server to access the session 
     xfbml: true, // parse XFBML 
     oauth: true 
    }); 
}; 

// Load the SDK Asynchronously 
(function (d) { 
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
    if (d.getElementById(id)) { return; } 
    js = d.createElement('script'); js.id = id; js.async = true; 
    js.src = "//connect.facebook.net/en_US/all.js"; 
    ref.parentNode.insertBefore(js, ref); 
})(document); 

Ahora, sé que la parte real de Facebook SDK está trabajando ... pero en mi controlador de la referencia es siempre nula.

en mi controlador acabo de tener algo como esto:

function FooCtrl($scope, facebook) { 
    facebook.getLoginStatus(function(response) { 
     if (response.status === 'connected') { 
      var uid = response.authResponse.userID; 
      var accessToken = response.authResponse.accessToken; 
      // do something 
     } else if (response.status === 'not_authorized') { 
      // the user is logged in to Facebook, 
      // but has not authenticated your app 
     } else { 
      // the user isn't logged in to Facebook. 
     } 
    }); 
} 

angular continuación, se queja de que no puede encontrar un facebookProvider. ¿Alguna idea sobre cómo puedo lograr esto?

+0

Podría crear un plunker? plnkcr.co, haga clic en nuevo -> angularJS –

+0

¿Ha probado https://groups.google.com/forum/?fromgroups#!topic/angular/YkdZsH8ax4o%5B1-25%5D? – Max

Respuesta

6

incluya su función de fábrica con soportes de matriz como a continuación

app.factory('facebook', [function() { 
    return FB; 
}]); 

documentos de la API no son lo suficientemente claras. El punto de tener paréntesis de matriz es que puede especificar dependencias. Se inyectará en la creación de su servicio con AUTO. $ Inject. Pero ya que no tiene dependencias se saltará esa tarea :)

De todos modos, si necesita dependencias se puede solicitar como esto

app.factory('facebook', ["$log", function($someCrazyLoggerService){ 
    $someCrazyLoggerService.log("I'm Auto Injected crazy Logger"); 
}]); 
+0

Eso resolvió el problema que estaba viendo. Ahora tengo un conjunto diferente de problemas relacionados con la naturaleza asincrónica de la API ... bueno ... para tratar con eso. Gracias. –

+1

@blesh for ispiration (para el alcance) eche un vistazo https://gist.github.com/whisher/6270204 es simplemente un fragmento – Whisher

1

usted debe echar un vistazo a este módulo Facebook escribí.

Primero use FacebookProvider en la llamada de configuración de su aplicación, algo como FacebookProvider.init ('yourFacebookAppIdHere') ;, también puede configurar otras configuraciones, y luego en sus controladores use el servicio de Facebook y regístrese en eventos y llame a métodos asyncrhonously;)

https://github.com/ciul/angularjs-facebook

Cuestiones relacionadas