Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Facebook api – Angular Controller/Provider setup not exposing variable to front-end

I’m trying to learn Angular by setting up a basic app that uses Facebook’s JS API. Here is what I have so 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 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);
                    }

                });
            }
        }
    }
});
})();

My issue is exposing the feed variable to the page. It does get set correctly in the controller when debugging but the jsp does not reflect that. I’ve also verified that the data returned from the graph call is in JSON format. The data is correctly logged to the console as well. After researching this the past few days, I think what I have is a scope issue but I’m not sure how to resolve it. Can someone explain the (most) correct way to expose feed to the page?

Tags:

2

Answers


  1. 0

    why dont you assign the stories to feed variable like

    $scope.feed = stories;

    and use it like this.

    <div ng-controller="FrontpageController" class="container-fluid" style="display: inline;">
       <h2>{{feed[0].message}}</h2>
</div>
    Login or Signup to reply.
  2. 0

    Maybe the problem is related to the way JavaScript handles ‘this’.

    Try to reference this to that in your controller and assign the facebook result to that.feed instead of this.feed

    app.controller('FrontpageController', function($scope, facebook) {

    var that = this;

    facebook.login(function (accessToken) {
        facebook.graph('nasa?fields=id,name,posts', function(results){
            console.log(results.posts.data);
            stories = results.posts.data;
            that.feed = stories;
        });
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search