Facebook Login Button using AngularJS

Question

I am attempting to add the Facebook Login button to my website using the documentation at https://developers.facebook.com/docs/reference/plugins/login/

Now, this button is displayed in a view. The view is loaded only when the user explicitly requests to login to the website.

I am using the HTML5 version. In Step 1, I am asked to include the Javascript SDK - I do this immediately after the tag. This is located in the main page that contains the ng-view directive.

I place the code to render the login button inside the view. Problem is that if I navigate to the view by clicking on the login button in the main page, the view does not render the FB login button. However if I refresh the page (the one containing the login view), the button renders.

I have moved the code for the Javascript SDK into the login view too- both before the button is rendered and after but that also does not solve the problem. Only when refreshing the login view, the button is rendered.

So,
a) Either I need to know why this is happening and the solution or
b) Refresh in AngularJS; that is I need to know the AngularJS way to refresh the login view before it is rendered so that (I Hope) the login button gets rendered.

Answer 1

This is because Facebook renders the whole page once to find its buttons and stuff. You need to re-run parser after you load ngView.

Since you shall not do dom manipulation on the controller here is a directive version.

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