0
FacebookのJS APIを使用する基本的なアプリケーションを設定してAngularを学びたい。ここで私はこれまで持っているものです。Angular Controller/Providerの設定でフロントエンドに変数が公開されない
のindex.html：
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="js/app.js"></script>
<script>
</script>
<title>App</title>
</head>
<body background="${pageContext.request.contextPath}/images/space.jpg" style="background-size:100% 100%; background-attachment:fixed;" />
<br>
<div id='fb-root'></div>
<div class="app-main">
<div style="text-align:center">
<h2>
<font color="white">Top Stories</font><br> <br>
</h2>
<div class="container-fluid">
<div class="jumbotron topStories">
<div ng-controller="FrontpageController as frontCtrl" class="container-fluid" style="display: inline;">
<h2>{{frontCtrl.feed[0].message}}</h2>
</div>
</div>
</div>
</div>
</div>
</body>
app.js：
(function(){
var app = angular.module('app', []);
var stories = [];
app.config(function(facebookProvider) {
facebookProvider.setAppID('my_app_id');
});
app.controller('FrontpageController', function($scope, facebook) {
facebook.login(function (accessToken) {
facebook.graph('nasa?fields=id,name,posts', function(results){
console.log(results.posts.data);
stories = results.posts.data;
this.feed = stories;
});
});
});
app.provider('facebook', function() {
var fbReady = false;
this.appID = 'Default';
function fbInit(appID) {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : appID,
xfbml : true,
version : 'v2.7'
});
fbReady = true;
}
}
this.setAppID = function(appID) {
this.appID = appID;
};
this.$get = function() {
var appID = this.appID;
var self = this;
fbInit(appID);
return {
graph : function(path, cb) {
FB.api(path, function(response) {
var result = response;
cb(response);
});
},
getAuth : function() {
return self.auth;
},
getLoginStatus : function(cb) {
if (!fbReady) {
setTimeout(function() {
self.$get()['getLoginStatus'](cb);
}, 100);
console.log('fb not ready');
return;
}
FB.getLoginStatus(function(response) {
cb(response);
});
},
login : function(cb) {
if (!fbReady) {
setTimeout(function() {
self.$get()['login'](cb);
}, 100);
console.log('fb not ready');
return;
}
FB.login(function(response) {
if (response.authResponse) {
access_token = FB.getAuthResponse()['accessToken'];
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name
+ '.');
});
self.auth = response.authResponse;
cb(access_token);
} else {
console.log('Facebook login failed', response);
}
});
},
logout : function() {
FB.logout(function(response) {
if (response) {
self.auth = null;
} else {
console.log('Facebook logout failed.', response);
}
});
}
}
}
});
})();
私の問題は、ページにフィード変数を公開しています。デバッギング時にコントローラーで正しく設定されますが、jspには反映されません。また、グラフ呼び出しから返されたデータがJSON形式であることを確認しました。データも正しくコンソールに記録されます。この数日後に調べたところ、の範囲の問題があると思いますが、解決方法はわかりません。誰かが（最も）正しい方法を説明することができますフィードページに？
変更なしのthat.feedするためにFacebookの結果を割り当てるようにしてください。 – JohnQuincyKerbal
これは私のために働いてしまった。私はコントローラに最初に$ scopeを依存関係として注入することを無視していました。ヒントをありがとう！それは助けてうれしい – JohnQuincyKerbal
。 :) –