Phonegap + Facebook plugin with AngularJS

Question

I want to develop an app in Javascript and deploy it using Phonegap on Android and iOS. I want to use Facebook to log into my app.

So, I check out the phonegap-facebook plugin and everything worked fine (I managed to log in using FB). The problem is when I want to "angularize" the example code supplied with the plugin : in the index.html i have JS embed like this :

<script>
  // Initialize the Facebook SDK
  document.addEventListener('deviceready', function() {
      FB.init({
          appId: 'XXX',
          nativeInterface: CDV.FB,
          useCachedDialogs: false
      });

      FB.getLoginStatus(handleStatusChange);

      authUser();
      updateAuthElements();
  });
</script>

The js method called update the display directly (using document.getElementById). I want to create a binding between my index.html and the javascript code in order to print facebook token and names using something like

{{user.token}} and {{user.names}}

Does someone managed to realize something like that?

Thanks a lot!

Answer 1

If anyone's still looking to do the same thing, I spent a long time battling with this and eventually wrote a fairly long blog post detailing how I got it working.

I tried many existing suggestions including the Gist in subZero's comment above, but couldn't get it working with my Phonegap project on a device emulator.

My post walks through bootstrapping a fresh project using Phonegap + FB plugin + AngularJS, but for me the key missing piece to doing this straightforwardly and the 'Angular way' was the angular-easyfb module, which I believe only added Phonegap support recently. Well worth a look if you're stuck with this!

My demo app code using this module is in this gist.