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 kn…

Accepted Answer

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]);
        }
    };
};
```

Facebook Login Button using AngularJS

Solution

Problem