2

Facebook登錄集成到角應用不知怎的,我不能夠給Facebook登錄集成到我的angularjs的應用程序,雖然我覺得我只是失去一個小的錯誤,我不能指出,因此你愛好者可能SURESHOT幫助!廣東話使用ngFacebook

我已經使用這個plunker example

按照上面的代碼一樣的東西已經plunker被提及,下面爲Y文件。

我app.js {其中有什麼,但路由信息,ngFacebook模塊我controller.js注入了}

  'use strict'; 

      // Declare app level module which depends on filters, and services 
      angular.module('ngdemo', ['ngdemo.filters', '$strap.directives', 'ngdemo.services', 'ngdemo.directives', 'ngdemo.controllers']). 
       config(['$routeProvider', function ($routeProvider) { 
        $routeProvider.when('/view5', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl4'}); 
        $routeProvider.when('/view1', {templateUrl: 'modulepages/home.html', controller: 'MyCtrl1'}); 
        $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'}); 
        $routeProvider.when('/view4', {templateUrl: 'modulepages/bizregistration.html', controller: 'MyCtrl3'}); 
        $routeProvider.when('/view6', {templateUrl: 'partials/modalcontent.html', controller: 'MyCtrl5'}); 
        $routeProvider.otherwise({redirectTo: '/view5'}); 
       }]); 

這是我Controller.js具有ngFacebook集成的心臟。

  'use strict'; 

      /* Controllers */ 

      var app = angular.module('ngdemo.controllers', ['ngResource', 'ngFacebook']) 
       .config([ '$facebookProvider', function($facebookProvider) { 
        alert("am i here?"); 
        $facebookProvider.setAppId('239661002870669'); 
       }]); 


      // Clear browser cache (in development mode) 
      // 
      // http://stackoverflow.com/questions/14718826/angularjs-disable-partial-caching-on-dev-machine 
      app.run(function ($rootScope, $templateCache) { 

       (function(){ 
        // If we've already installed the SDK, we're done 
        if (document.getElementById('facebook-jssdk')) {return;} 

        // Get the first script element, which we'll use to find the parent node 
        var firstScriptElement = document.getElementsByTagName('script')[0]; 

        // Create a new script element and set its id 
        var facebookJS = document.createElement('script'); 
        facebookJS.id = 'facebook-jssdk'; 

        // Set the new script's source to the source of the Facebook JS SDK 
        facebookJS.src = '//connect.facebook.net/en_US/all.js'; 

        // Insert the Facebook JS SDK into the DOM 
        firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement); 
       }()); 

       $rootScope.$on('$viewContentLoaded', function() { 
        $templateCache.removeAll(); 
       }); 
      }); 



      app.controller('DemoCtrl', ['$scope', '$facebook', function ($scope, $facebook) { 
       alert("I am here out"); 

       $scope.isLoggedIn = false; 
       $scope.login = function() { 
        $facebook.login().then(function() { 
         refresh(); 
        }); 
       } 
       function refresh() { 
        $facebook.api("/me").then(
         function(response) { 
          $scope.welcomeMsg = "Welcome " + response.name; 
          $scope.isLoggedIn = true; 
         }, 
         function(err) { 
          $scope.welcomeMsg = "Please log in"; 
         }); 
       } 

       refresh(); 


      }]); 

,這就是我的index.html

  <!DOCTYPE html> 
      <html ng-app="ngdemo" lang="en"> 
      <head> 
      <meta charset="utf-8"> 
      <title>You local needs are just a pingle away - pingle.com</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" href="css/app.css"/> 
      <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> 

      </head> 
      <body ng-controller="DemoCtrl" bgcolor="#e8e8e8"> 

      <div class="container"> 
       <h4> 
        {{welcomeMsg}} 
       </h4> 
       <button type="button" ng-click="login()" ng-hide="isLoggedIn" class="btn btn-default navbar-btn"> 
        Login 
       </button> 
      </div> 
      <div id="fb-root"> 
      </div> 

      <div ng-view> 
      </div> 

      <script src="lib/angular/angular.js"></script> 
      <script src="lib/angular/angular-resource.js"></script> 
      <script src="lib/angular/angular-strap.js"></script> 
      <script src="js/app.js"></script> 
      <script src="js/services.js"></script> 
      <script src="js/controllers.js"></script> 
      <script src="js/filters.js"></script> 
      <script src="js/directives.js"></script> 

      <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"> 
      </script> 
      <script src="//rawgithub.com/GoDisco/ngFacebook/master/ngFacebook.js"></script> 

      </body> 
      </html> 

能否請你幫哪裏出了問題,這將是一個很大的幫助,這是我的應用程序的重要組成部分。

回答

1

我剛剛在我的IDE中複製/粘貼了您的代碼並進行了測試。我不得不刪除一些東西來簡化測試。

E.g.刪除過濾器,指令,服務以及routeprovider的配置。 我也刪除了角帶。我的Facebook應用程序ID更新爲一個應用程序我自己的ID ......

如果刪除一切你能得到它的工作,那麼你可以逐步添加你需要的東西,像路由,角帶等也許有這些造成了問題......

您提供(與所有不必要的東西清理)只是工作罰款Facebook登錄,喜歡plunker代碼代碼...

在寫作的那一刻,如果你這樣做不指定API的Facebook版本,你可以在控制檯得到一個錯誤,所以我指定這樣的:

angular.module('app') 
.config(function ($facebookProvider) { 
    $facebookProvider.setAppId(facebookAppId); 

    $facebookProvider.setCustomInit({ 
     version: 'v2.1' 
    }); 

    $facebookProvider.setPermissions('email'); 
}); 

其實我覺得這個問題可以被關閉,因爲提供的代碼是不完整的,需要一些努力,就像我說過刪除所有unneded東西...