2012-08-19 55 views
13

我正在嘗試爲Angular創建一個Facebook服務,這樣我可以更輕鬆地測試需要使用Facebook JS SDK和Graph API的代碼。將Facebook JS SDK注入到AngularJS控制器中

這是我到目前爲止有:

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); 

現在,我知道實際的Facebook SDK部分工作......但在我的控制器中的引用總是空。

在我的控制器

我只是有這樣的事情:

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. 
     } 
    }); 
} 

角則抱怨它不能找到一個facebookProvider。有關我如何完成此任何想法?

+0

你可以創建一個plunker嗎? plnkcr.co,點擊新建 - > angularJS – 2012-08-19 03:13:21

+0

您是否嘗試了https://groups.google.com/forum/?fromgroups#!topic/angular/YkdZsH8ax4o%5B1-25%5D? – Max 2012-08-19 11:27:50

回答

6

圍成陣列支架貴廠功能類似下面

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

API文檔是不夠清晰。有數組括號的地方是你可以指定依賴關係。它將通過AUTO。$ inject創建您的服務。但是,因爲你沒有依賴關係,將跳過任務:)

無論如何,如果你需要的依賴,你可以要求他們這樣

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

解決了我所看到的問題。現在我有一組完全不同的問題,涉及FB api的異步性質......大聲笑......處理這個問題。謝謝。 – 2012-08-23 00:38:36

+1

@blesh的願望(範圍)看看https://gist.github.com/whisher/6270204它只是一個簡單的片段 – Whisher 2013-08-19 15:12:26

1

你應該看看這個Facebook的模塊我寫的。

首先在您的應用程序配置調用中使用FacebookProvider,如FacebookProvider.init('yourFacebookAppIdHere');您也可以配置其他設置,然後在您的控制器上使用Facebook服務並註冊到事件和調用方法asterrhonously;)

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