AngularJSコントローラにFacebook JavaScript SDKを正しく挿入するにはどうすればいいですか？

Question

私はAnuglarJSを初めて使っており、既に小さなWebアプリケーションを構築しています。 ベストプラクティス（コントローラへの依存性注入、アプリの構造とテスト容易性の維持）を使用してFacebook JavaScript SDKを使用したいと思います。

私はこのhttps://groups.google.com/forum/#!msg/angular/bAVx58yJyLE/Kz56Rw-cQREJ ですが、このフレームワーク（モジュール、サービス、工場はよくIMHOで説明されていません）の新しい人にとっては非常に混乱しています。

AnglesJSアプリ内でFacebook SDKを使用する適切な方法は何ですか？

実際にこれを実行しなければならなかった私は...私は私と一緒にコードを持っていない、そしてそれはとにかく、おそらく独自のだ...しかし、それは、本質的にこのようなものだった

Answer 1

：いずれかがある場合

// create a simple factory:  
app.factory('facebook', ['$window', function($window) { 

    //get FB from the global (window) variable. 
    var FB = $window.FB; 

    // gripe if it's not there. 
    if(!FB) throw new Error('Facebook not loaded'); 

    //make sure FB is initialized. 
    FB.init({ 
     appId : 'YOUR_APP_ID' 
    }); 

    return { 
     // a me function 
     me: function(callback) { 
      FB.api('/me', callback); 
     } 

     //TODO: Add any other functions you need here, login() for example. 
    } 
}]); 

// then you can use it like so: 
app.controller('SomeCtrl', function($scope, facebook) { 

    //something to call on a click. 
    $scope.testMe = function() { 

     //call our service function. 
     facebook.me(function(data) { 
      $scope.facebookUser = data; 

      //probably need to $apply() this when it returns. 
      // since it's async. 
      $scope.$apply(); 
     }); 
    }; 
}); 

私が知っているエラーは、私が持っている作業コードを見て、私が見逃したことを見ていきます。しかしそれはそれに関するべきである。

Answer 2

唯一の方法は、古い方法でインデックスページにsdkを含めることです。

@blueや@elviejoの拡張バージョンから同じソリューションを実装しているので、コントローラが呼び出されたときに呼び出される関数を持つと、両方とも問題が発生します。FBが初期化されていない可能性は非常に高いですこれは、呼び出しを失敗しますundefinedから

これは、これで頭痛を避ける他の人に役立つことを願っています。

Answer 3

私はこのanglejs-facebookサービスを書いています。 まず、アプリケーションモジュールの設定メソッドでinitを実行して、FacebookのアプリIDやその他の設定を初期化します。

これで、コントローラからFacebookサービスを呼び出すことができ、通常の方法と同じようにFacebookメソッドを非同期に呼び出すことができます。

https://github.com/ciul/angularjs-facebook

Answer 4

2015 EDIT！

これは古い回答です。

• https://github.com/Ciul/angular-facebook
• https://github.com/pc035860/angular-easyfb
• https://github.com/GoDisco/ngFacebook

旧回答

：私はあなたがそれらを使用するだけgithubの上の人気の角度-モジュールはそれを行う方法を確認したり、勧めます

アプリの開始時にコールに問題があるため、次の方法を使用します。唯一のSDKがロードされた後のアプリ：私はしばらくの間、これに困惑して

window.fbAsyncInit = function() { 
FB.init({ 
    appId: window.fbConfig.appID, 
    channelUrl: '//' + window.location.hostname + window.location.pathname + 'channel.php', 
    status: window.fbConfig.oInitOptions.bStatus || true, 
    cookie: window.fbConfig.oInitOptions.bCookie || true, 
    xfbml: window.fbConfig.oInitOptions.bXfbml || true 
}); 


// Get Login Status once at init 
window.FB.getLoginStatus(function (oResponse) { 
    if (oResponse && oResponse.status) { 
     window.fbConfig.sAuthStatus = oResponse.status; 
    } 

    // Bootstrap app here only after the sdk has been loaded 
    angular.bootstrap(document.body, ['fbAngularApp']); 
}); 
}; 

// Load the SDK Asynchronously 
(function (d) { 
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
if (d.getElementById(id)) { 
    return; 
} 
js = d.createElement('script'); 
js.id = id; 
js.async = true; 
js.src = '//connect.facebook.net/' + window.fbConfig.lng + '/all.js'; 
ref.parentNode.insertBefore(js, ref); 
}(document)); 

Answer 5

は、私は$の時計でそれを解決し

//setup watch for FB API to be ready 
//note that since you use $window, you need to inject it into your controller 
//angular.module('myApp').controller('appController', function ($scope, $window, ...) { 
$scope.FBListener = $scope.$watch(function() { 
    return $window.FB; 
}, function (newVal, oldVal) { 
    // FB API loaded, make calls 
    console.log("FB is ready"); 
    //functions that do FB API calls 
    $scope.getFBEvents(); 
    $scope.getFBPosts(); 
}); 

FBがロードされたとき、あなたはクリアすることができます$ watch（これはおそらくパフォーマンスのために行うのが最善です）$scope.FBListener();