2016-09-23 116 views
-1

我已經瀏覽了所有相關的StackOverflow頁面,沒有任何東西可以用於我的情況。我試圖console.log(響應),它只是說對象對象。我不清楚爲什麼我在獲得「歡迎」之前在我的應用程序上收到「歡迎使用未定義」。爲什麼我對response.name沒有定義?

應用程序/ Facebook的/ facebook.js:

'use strict'; 

angular.module('ngSocial.facebook', ['ngRoute', 'ngFacebook']) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/facebook', { 
    templateUrl: 'facebook/facebook.html', 
    controller: 'FacebookCtrl' 
    }); 
}]) 

.config(function($facebookProvider) { 
    $facebookProvider.setAppId('1410425285653598'); 
    $facebookProvider.setPermissions("email, public_profile, user_posts, publish_actions, user_photos"); 
}) 

.run(function($rootScope){ 
    (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')); 
}) 

.controller('FacebookCtrl', ['$scope', '$facebook', function($scope, $facebook) { 
    $scope.isLoggedIn = false; 

    $scope.login = function(){ 
     $facebook.login().then(function(){ 
      $scope.isLoggedIn = true; 
      refresh(); 
     }); 
    } 


    $scope.logout = function(){ 
     $facebook.logout().then(function(){ 
      $scope.isLoggedIn = false; 
      refresh(); 
     }); 
    } 

    function refresh(){ 
     $facebook.api("/me",{fields:'last_name, first_name, email, gender, locale, link'}).then(function(response){ 
      $scope.welcomeMsg = "Welcome "+ response.name; 
      $scope.isLoggedIn = true; 
      $scope.userInfo = response; 
      $facebook.api('/me/picture').then(function(response){ 
       $scope.picture = response.data.url; 
       $facebook.api('/me/permissions').then(function(response){ 
        $scope.permissions = response.data; 
        $facebook.api('/me/posts').then(function(response){ 
         $scope.posts = response.data; 
        }); 
       }); 
      }); 
     }, 
     function(err){ 
      $scope.welcomeMsg = "Please Log In"; 
     }); 
    } 

    $scope.postStatus = function(){ 
     var body = this.body; 
     $facebook.api('/me/feed', 'post', {message: body}).then(function(response){ 
      $scope.msg = 'Thanks for Posting'; 
      refresh(); 
     }); 
    } 

    refresh(); 
}]); 

應用程序/ Facebook的/ facebook.html:

<div class="row" ng-controller="FacebookCtrl"> 
    <div class="col-md-4"> 
    <h4>{{welcomeMsg}}</h4> 
    <div ng-if="isLoggedIn == true"> 
     <a href="{{userInfo.link}}" target="_blank"><img ng-src="{{picture}}"></a> 
    </div> 
    <br> 
    <div ng-if="isLoggedIn == false"> 
     <button type="button" class="btn btn-default" ng-click="login()">Login</button> 
    </div> 
    <div ng-if="isLoggedIn == true"> 
     <button type="button" class="btn btn-default" ng-click="logout()">Logout</button> 
    </div> 
    <br><br> 
    <div ng-if="isLoggedIn == true" class="well"> 
     <h4>User Info</h4> 
     <ul> 
     <li>ID: {{userInfo.id}}</li> 
     <li>First Name: {{userInfo.first_name}}</li> 
     <li>Last Name: {{userInfo.last_name}}</li> 
     <li>Email: {{userInfo.email}}</li> 
     <li>Gender: {{userInfo.gender}}</li> 
     <li>Locale: {{userInfo.locale}}</li> 
     </ul> 
    </div> 
    <br> 
    <div class="well" ng-if="isLoggedIn == true"> 
     <h4>Permissions</h4> 
     <ul> 
     <li ng-repeat="permission in permissions">{{permission.permission}} - {{permission.status}}</li> 
     </ul> 
    </div> 
    </div> 
    <div class="col-md-8"> 
    <h3>Welcome to Facebook!</h3> 
    <div ng-if="isLoggedIn == true"> 
     <form ng-submit="postStatus()"> 
     <div class="form-group"> 
     <label>Status Update</label> 
     <textarea ng-model="body" class="form-control"></textarea> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    <br><br> 
    <div ng-repeat="post in posts" class="stbody"> 
     <div class="stimg"> 
     <img ng-src="{{picture}}"> 
     </div> 
     <div class="sttext">{{post.message}}<div class="sttime">{{post.updated_time}}</div> 
    </div> 
    </div> 
    </div> 
    <div ng-if="isLoggedIn == false"> 
    <p>You need to log in to post</p> 
    </div> 
</div> 

應用/ index.html的:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html lang="en" ng-app="ngSocial" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html lang="en" ng-app="ngSocial" class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html lang="en" ng-app="ngSocial" class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html lang="en" ng-app="ngSocial" class="no-js"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>NgSocial App</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="app.css"> 
</head> 
<body> 
    <nav class="navbar navbar-inverse"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">ngSocial</a> 
     </div> 
     </div> 
    </nav> 

    <!--[if lt IE 7]> 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 

    <div class="container"> 
    <div ng-view></div> 
     <div class="row"> 

     </div> 
    </div> 


    <!-- In production use: 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> 
    --> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="bower_components/ng-facebook/ngFacebook.js"></script> 
    <script src="app.js"></script> 
    <script src="view1/view1.js"></script> 
    <script src="view2/view2.js"></script> 
    <script src="facebook/facebook.js"></script> 
</body> 
</html> 
+0

當你CONSOLE.LOG'response',可以擴大對象並看看它的鑰匙? (適用於Chrome開發工具)它看起來像'name'不是'response'對象的屬性。 – joh04667

+0

console.log不應該給你[對象]對象,只有當對象被強制到某個字符串上下文時纔會發生。 (確保你不使用這樣的東西:'console.log('test:'+ object)',因爲那會導致這個問題。) – CBroe

回答

1

你的問題是這條線在facebook.api調用。

$scope.welcomeMsg = "Welcome "+ response.name;

如果我從看代碼(不熟悉Facebook的API)來猜測,它看起來好像你問First_Name和Last_Name臉譜,沒有名字。所以我懷疑的代碼行你想找的是

$scope.welcomeMsg = "Welcome "+ response.first_name + " " + response.last_name;

+0

我認爲他是console.logging'response',而不是' response.name'。你可能是對的,因爲'name'不是'響應'上的一個鍵,儘管 – joh04667

+0

啊你是你的權利,以及無論如何嘗試first_name +「」+ last_name而不是名字,這應該爲你做。 – acalfo

0

這取決於ngFacebook API如何返回response對象,但我的錢是在它被包裹在一個data屬性。改爲嘗試response.data.name

(您也可以展開控制檯後response對象在任何有能力的開發工​​具,例如Chrome瀏覽器記錄它,並在它的屬性手動樣子。)

相關問題