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东西...