的Facebook登錄使用按鈕AngularJS

我試圖Facebook的登錄按鈕https://developers.facebook.com/docs/reference/plugins/login/的Facebook登錄使用按鈕AngularJS

現在，這個按鈕顯示在一個視圖中添加使用的文檔我的網站。該視圖僅在用戶明確要求登錄到網站時加載。

我正在使用HTML5版本。在第1步中，我被要求包含JavaScript SDK - 我在標籤後立即執行此操作。它位於包含ng-view指令的主頁面中。

我將代碼呈現在視圖中的登錄按鈕。問題是，如果通過單擊主頁面中的登錄按鈕導航到視圖，視圖不會呈現FB登錄按鈕。但是，如果我刷新頁面（包含登錄視圖的頁面），該按鈕呈現。

我已經將Javascript SDK的代碼移入登錄視圖 - 在按鈕呈現之前和之後，但也沒有解決問題。只有刷新登錄視圖時，該按鈕纔會呈現。

所以，
一）無論我需要知道爲什麼發生這種情況，溶液或
二）在刷新AngularJS;那就是我需要知道AngularJS方法來刷新登錄視圖，然後才能呈現登錄按鈕（我希望）。

來源

2013-03-16 user109187

請發佈一個鏈接到plunker/jsfiddle。 – Stewie 2013-03-16 18:10:48

這是因爲Facebook呈現整個頁面一次以找到它的按鈕和東西。您需要在加載ngView後重新運行解析器。

既然你不應該在控制器上做dom操作這裏是一個指令版本。

angular.module("myApp", []).directive("fbLogin", function($rootScope) { 
    return function (scope, iElement, iAttrs) { 
     if (FB) { 
      FB.XFBML.parse(iElement[0]); 
     } 
    }; 
};

來源

2013-03-16 18:22:40

BRILLIANT !!我很努力地試圖在一個笨蛋中演示這個，這是一個節省！我不想創建一個指令，所以我所做的是在包含div來呈現FB登錄按鈕的視圖中，我在視圖的末尾添加了一個腳本標籤，其代碼爲FB.XFBML.parse（）;'而且做到了！非常感謝！ – user109187 2013-03-16 18:36:12

您是否有Google Plus登錄按鈕的解決方案？同樣的問題不同的社交網絡雖然... – user109187 2013-03-16 18:58:18

應該有手動解析，引導功能。它必須包含在文檔中，您必須仔細閱讀它。 – 2013-03-16 19:01:58

的Facebook登錄使用按鈕AngularJS

回答

相關問題