Facebook Login-Button mit AngularJS

Question

Ich bin versucht, den Facebook-Login-Button auf meine Website mit der Dokumentation bei https://developers.facebook.com/docs/reference/plugins/login/

Jetzt hinzuzufügen, diese Taste in einer Ansicht angezeigt wird. Die Ansicht wird nur geladen, wenn der Benutzer explizit anfordert, sich bei der Website anzumelden.

Ich verwende die HTML5-Version. In Schritt 1 werde ich gebeten, das Javascript-SDK aufzunehmen - ich mache das sofort nach dem Tag. Dies befindet sich auf der Hauptseite, die die ng-view Direktive enthält.

Ich platziere den Code, um die Login-Schaltfläche in der Ansicht zu rendern. Problem ist, dass wenn ich durch Klicken auf die Login-Schaltfläche auf der Hauptseite zur Ansicht navigiere, die Ansicht nicht die FB-Login-Schaltfläche darstellt. Wenn ich jedoch die Seite aktualisiere (diejenige mit der Login-Ansicht), rendert die Schaltfläche.

Ich habe den Code für das Javascript SDK auch in die Login-Ansicht verschoben - sowohl vor als auch nach der Rendering-Schaltfläche, aber das löst auch nicht das Problem. Nur beim Aktualisieren der Login-Ansicht wird die Schaltfläche gerendert. Aktualisieren

So
a) Entweder ich muss wissen, warum dies geschieht und die Lösung oder
b) in AngularJS; das ist, ich muss den AngularJS-Weg kennen, um die Login-Ansicht zu aktualisieren, bevor es gerendert wird, so dass (ich hoffe) der Login-Button gerendert wird.

Answer 1

Das ist, weil Facebook die ganze Seite einmal rendert, um seine Knöpfe und Sachen zu finden. Sie müssen den Parser erneut ausführen, nachdem Sie ngView geladen haben.

Da Sie keine dom Manipulation auf dem Controller tun sollten, ist hier eine Richtlinie Version.

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