Angular控制器/提供程序设置不向前端暴露变量

我试图通过设置一个使用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);
                    }
                });
            }
        }
    }
});
})();

我的问题是暴露饲料变量的页面。在调试时，它确实在控制器中得到了正确的设置，但jsp并没有反映这一点。我还验证了从图形调用返回的数据是JSON格式的。数据也被正确地记录到控制台。在研究了过去的几天后，我认为我所拥有的是一个范围问题，但我不确定如何解决它。有人能解释(最)正确的方式来暴露饲料的页面吗?

为什么不把故事分配给feed变量，比如

$scope.feed = stories;

并像这样使用

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

可能问题与JavaScript处理'this'的方式有关。

尝试将这个引用到控制器中的那个，并将facebook结果赋值给那个。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;
        });
    });
});

相关内容

最新更新

热门标签：