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

我想通过设置使用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格式。数据也正确记录到控制台。经过这几天的研究，我认为我的是范围问题，但我不知道如何解决它。有人可以解释（最）正确的方式将饲料暴露给页面吗？

来源

2016-09-22 JohnQuincyKerbal

你为什么不分配故事喂可变像

$scope.feed = stories;

，并使用它像这样。

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

来源

2016-09-22 14:54:46

没有改变行为尝试这种方式。 – JohnQuincyKerbal

这最终为我工作。我最初忽略了将$ scope作为依赖注入到控制器中。谢谢你的提示！ – JohnQuincyKerbal

很高兴帮助。 :) –

也许问题与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; 
     }); 
    }); 
});

来源

2016-09-22 14:57:17 4n6r

我没有看到任何使用您的建议行为的变化。 – JohnQuincyKerbal

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

回答

相关问题