javascript - Angular Controller/Provider setup not exposing variable to front-end -
i'm trying learn angular setting basic app uses facebook's js api. here have far:
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 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 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); } }); } } } }); })();
my issue exposing feed variable page. set correctly in controller when debugging jsp not reflect that. i've verified data returned graph call in json format. data correctly logged console well. after researching past few days, think have scope issue i'm not sure how resolve it. can explain (most) correct way expose feed page?
why dont assign stories feed variable like
$scope.feed = stories;
and use this.
<div ng-controller="frontpagecontroller" class="container-fluid" style="display: inline;"> <h2>{{feed[0].message}}</h2> </div>
Comments
Post a Comment