Angular Controller / Provider設置未將變量暴露給前端

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格式。 數據也正確記錄到控制台。 經過幾天的研究，我認為我遇到的是示波器問題，但不確定如何解決。 有人可以解釋將Feed公開到頁面的（最正確）方法嗎？

Answer 1

你為什么不分配故事來喂養像

$scope.feed = stories;

並像這樣使用它。

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

Answer 2

也許問題與JavaScript處理“ this”的方式有關。

嘗試在控制器中引用它，並將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;
        });
    });
});

Angular Controller / Provider設置未將變量暴露給前端

問題描述

2 個解決方案

解決方案1
1 已采納 2016-09-22 14:54:46

解決方案2
0 2016-09-22 14:57:17

Angular Controller / Provider設置未將變量暴露給前端

問題描述

2 個解決方案

解決方案1 1 已采納 2016-09-22 14:54:46

解決方案2 0 2016-09-22 14:57:17

解決方案1
1 已采納 2016-09-22 14:54:46

解決方案2
0 2016-09-22 14:57:17