Facebook login button using AngularJS

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

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

I am using HTML5 version. In step 1, I will be asked to enable the Javascript SDK - I do this right after the tag. It is located on the main page containing the directive ng-view.

I put the code to display the view entry button. The problem is that if I go to the preview by clicking the login button on the main page, the view will not display the login button in FB. However, if I refresh the page (the one that contains the input view), the button displays.

I moved the code for the Javascript SDK to the login window - both before the button is processed and after, but this also will not solve the problem. Only when updating the login name is the button displayed.

So
a) I need to know why this is happening, and a solution, or b) Update in AngularJS; that is, I need to know the way AngularJS is to update the login window before it is shown so that (I hope) the login button will be displayed.

+5
source share
1 answer

This is due to the fact that Facebook displays the entire page once to find its buttons and more. You need to restart the parser after loading ngView.

Since you should not do dom manipulations on the controller, this is a directory version.

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

All Articles