AngularJS with Facebook SDK

Question

I have a problem with angularjs.

I want to return values within the Facebook SDK functions but will not let me get them in variables.

The "perfil_nombre" and "perfil_foto" the variables returned as "undefined" and wish to send to the scope.

Any chance? I'm totally lost.

Excuse my bad English.

login.controller('inicio_ctrl', function($scope, $http, $timeout, $window)
{
      var laspaginas;
      var response;
      var perfil_foto;
      var perfil_nombre;
      var resp;
      $scope.FBLogin = function()
      {
        FB.login(function(response) 
        {
            if(response.authResponse) 
            {
                FB.api('/me', function(response) 
                {
                    perfil_nombre = response.name; //<<<<<-------- good
                    FB.api('/me/picture?redirect=false', function(resp) 
                    {
                       perfil_foto = resp.data.url; //<<<<<-------- good
                    });
                });
            } 
            else 
            {
             console.log('User cancelled login or did not fully authorize.');
            }
        }, 
        { scope: 'email, public_profile, manage_pages,publish_pages,read_insights,user_friends, publish_actions'});
        $scope.perfil_foto = perfil_foto; //<<<<<-------- undefined
        $scope.perfil_nombre =  perfil_nombre; //<<<<<-------- undefined
});

score 0 · Answer 1 · answered Jan 06 '16 at 00:55

Angular is designed as an MVC or MV* framework. As such it is generally better to separate your logic into a service and then inject the service into the controller. This way you can prevent negative interactions between Angular and other frameworks. It can be difficult to anticipate how Angular will interact with outside libraries.

The simplest way to do this is make your function work using just javascript and then wrap it in a .factory or .service.

For example

(function(){
    'use strict';
    login.factory('FBService', FBService);

    FBService.$inject = [(/*What ever dependencies are needed*/)];
    function FBService(/*What ever dependencies are needed*/){
        //Build the profile object (I assume perfil translates to profile in english)
        var profileObject;
        //Add Javascript Logic Here


        //Create Getters to obtain the data
        function getFoto(){
            return profileObject.foto;
        }

        //expose Getter
        return {getFoto: getFoto}
    }
})();

(function(){
    'use strict';
    login.controller('inicio_ctrl', inicioCtrl);

    inicioCtrl.$inject = ["$scope", "$http", "$timeout", "$window", "FBService"];
    function inicioCtrl($scope, $http, $timeout, $window, FBService){
        var ctrl = this;

        ctrl.login = function(){
            ctrl.perfil_folo = FBService.getFoto();
        }
    }
})();

If you can get the Javascript to work outside of Angular then this will allow you to preserve the work and integrate it into Angular

AngularJS with Facebook SDK

1 Answers1