如何使用自定义服务将 LinkedIn API 中的用户信息保存到 Angularjs 控制器中

Question

我是 angular 的新手，我无法将来自 LinkedIn API 的用户信息保存到控制器中的范围，而没有将范围传递到我的自定义服务。我认为这不是 angular 编程方式。

//html

<script type="text/javascript" src="//platform.linkedin.com/in.js">
  api_key: *********
  onLoad: onLinkedInLoad
</script>

// linkedIn button

<script type="in/Login">
</script>

// app.js

angular.module("linkedinTestApp",[]);

function onLinkedInLoad(){
  eScope.$apply(function(){
    eScope.getLinkedInData();
  })
};

// main controller

var eScope;
angular.module("linkedinTestApp").
controller('mainCtrl',function($scope,linkedInService){
  eScope = $scope;

  $scope.getLinkedInData = function(){
    linkedInService.OnLinkedInFrameworkLoad($scope);
  }
})

//custom service

angular.module('linkedinTestApp')
.service('linkedInService', function() {
    var scope;
    this.OnLinkedInFrameworkLoad = function(s) {
      scope = s;
      IN.Event.on(IN, "auth", this.OnLinkedInAuth);
      console.log("Test1");
    }

    this.OnLinkedInAuth = function() {
      IN.API.Profile("me").result(function(result){
        console.log(result);
        var profile = {
            vnaam: result.values[0].firstName,
            anaam: result.values[0].lastName,
            foto: result.values[0].pictureUrl,
            headline: result.values[0].headline,
            id: result.values[0].id
        }
        console.log(profile);
        scope.profile = profile;
      });
      console.log("Test2");
    }
});

Answer 1

我的建议：

angular.module('linkedinTestApp').service('linkedInService', function($q) {
    var deferred = $q.defer();
    var self = this;
    this.profile = null;

    this.OnLinkedInFrameworkLoad = function() {
      IN.Event.on(IN, "auth", this.OnLinkedInAuth);
      console.log("Test1");
    } // NOT SURE IF THIS FUNCTION IS NEEDED, OR WHO CALLS IT, MAYBE YOU NEED TO JUST REPLACE IT WITH THE NEXT LINE:
    // IN.Event.on(IN, "auth", this.OnLinkedInAuth);

    this.OnLinkedInAuth = function() {
      IN.API.Profile("me").result(function(result){
        console.log(result);
        deferred.resolve( {
            vnaam: result.values[0].firstName,
            anaam: result.values[0].lastName,
            foto: result.values[0].pictureUrl,
            headline: result.values[0].headline,
            id: result.values[0].id
        } );
      });
      console.log("Test2");
    }

    this.instance = function() {
         return deferred.promise;
    }
});

并在你的控制器中使用它：

$scope.linkedInService.instance().then(
   function(profile) {
       console.log(profile);
   }
);

当然我还没有测试过，但我希望它会起作用...

Answer 2

测试代码。我花了 20-30 分钟才得到 api 密钥，当我测试某人 post 的答案时，但我的代码经过测试所以 post 这个类似的答案。这也不是在控制器中获取配置文件的最优雅的方式，但我想尽可能少地更改代码（为了相似）。

angular.module("linkedinTestApp",[]);

function onLinkedInLoad(){
  eScope.$apply(function(){
    eScope.getLinkedInData();
  })
};

// main controller

var eScope;
angular.module("linkedinTestApp").
controller('mainCtrl',function($scope,linkedInService){
  eScope = $scope;

  $scope.getLinkedInData = function(){
    linkedInService.OnLinkedInFrameworkLoad().then(function(profile){
      console.log('response ', profile);
  });
  }
})

//custom service

angular.module('linkedinTestApp')
.service('linkedInService', function($q) {
    this.OnLinkedInFrameworkLoad = function() {
      var deferred = $q.defer();

      IN.Event.on(IN, "auth", function(){
        deferred.resolve(OnLinkedInAuth())
      });
      return deferred.promise;
    }

    function OnLinkedInAuth() {
      var deferred = $q.defer();

      IN.API.Profile("me").result(function(result){
        console.log(result);
        var profile = {
            vnaam: result.values[0].firstName,
            anaam: result.values[0].lastName,
            foto: result.values[0].pictureUrl,
            headline: result.values[0].headline,
            id: result.values[0].id
        }
        deferred.resolve(profile);
      });
      return deferred.promise;
    }
});

Answer 3

// main controller

    angular.module("linkedinTestApp").
    controller('mainCtrl',function($scope,linkedInService){

      $scope.getLinkedInData = function(){
        linkedInService.OnLinkedInFrameworkLoad().then (function (result) {
             $scope.profile = result;
        });
      }
    })

    //custom service

    angular.module('linkedinTestApp')
    .service('linkedInService', function() {
        this.OnLinkedInFrameworkLoad = function() {
          return this.OnLinkedInAuth();
        }

        this.OnLinkedInAuth = function() {
          return IN.API.Profile("me").result(function(result){
            console.log(result);
            var profile = {
                vnaam: result.values[0].firstName,
                anaam: result.values[0].lastName,
                foto: result.values[0].pictureUrl,
                headline: result.values[0].headline,
                id: result.values[0].id
            }
            console.log(profile);
            return profile;
          });
        }
    });

如何使用自定义服务将 LinkedIn API 中的用户信息保存到 Angularjs 控制器中

How to save user info from LinkedIn API into Angularjs controller using a custom service

javascript

angularjs

linkedin-api