Facebook Login Button utilizzando AngularJS

Question

Sto tentando di aggiungere il pulsante Facebook Login al mio sito web utilizzando la documentazione a https://developers.facebook.com/docs/reference/plugins/login/

Ora, questo pulsante viene visualizzato in una vista. La vista viene caricata solo quando l'utente richiede esplicitamente di accedere al sito web.

Sto usando la versione HTML5. Nel passaggio 1, mi viene chiesto di includere l'SDK Javascript: lo faccio subito dopo il tag. Questo si trova nella pagina principale che contiene la direttiva ng-view.

Posiziono il codice per il rendering del pulsante di accesso all'interno della vista. Il problema è che se si passa alla vista facendo clic sul pulsante di accesso nella pagina principale, la vista non visualizza il pulsante di login FB. Tuttavia, se aggiorno la pagina (quella che contiene la vista di accesso), il pulsante esegue il rendering.

Ho spostato il codice per l'SDK di Javascript anche nella vista di accesso, sia prima che il pulsante sia visualizzato, sia dopo, ma anche questo non risolve il problema. Solo quando si aggiorna la vista di accesso, il pulsante viene visualizzato.

Quindi,
a) O ho bisogno di sapere perché questo sta accadendo e la soluzione o
b) Aggiornare in AngularJS; cioè ho bisogno di conoscere il modo AngularJS per aggiornare la vista di login prima che sia renderizzata in modo che (I Hope) venga reso il pulsante di login.

Answer 1

Questo perché Facebook esegue il rendering dell'intera pagina una volta per trovare i pulsanti e tutto il resto. È necessario rieseguire il parser dopo aver caricato ngView.

Dato che non si deve manipolare dom sul controller, ecco una versione direttiva.

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