Question

我试图通过设置一个使用Facebook的JS API的基本应用程序来学习Angular。以下是我到目前为止的情况：

的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);
                    }

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

我的问题是将 Feed 变量暴露给页面。在调试时它确实在控制器中正确设置，但是jsp没有反映出来。我还验证了图表调用返回的数据是JSON格式。数据也正确记录到控制台。在过去几天对此进行研究之后，我认为我的问题是范围问题，但我不确定如何解决它。有人可以解释（最）正确的方式将提要公开给页面吗？

Answer 1

为什么不指定故事来提供像

这样的变量

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-feature android:name="android.hardware.location.gps" android:required="false" />

并像这样使用它。

$scope.feed = stories;

Answer 2

也许这个问题与JavaScript处理这个问题的方式有关。

。

尝试在控制器中引用它，并将facebook结果分配给that.feed而不是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;
        });
    });
});

角度控制器/提供程序设置不将变量暴露给前端

2 个答案: