2016-09-23 82 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浏览器记录它,并在它的属性手动样子。)

相关问题