javascript - angularJS Controller 函数回调

Question

我想知道回调在 angularJS 中是如何工作的。我让这段代码像这样完美地工作

$scope.loginFB = function () {
  hello(FACEBOOK).login(function () {
    hello(FACEBOOK).api('me').then(function (profile) {
      console.log('successful api call');
      dbService.handle_credentials(profile);
      $rootScope.$apply(function () {
        $location.path('/homePage');
      });
    }, function(){
      console.error('something went wrong with authentification');
    });
  });
};

但像这样重构时会以奇怪的方式工作

$scope.loginHandler =function () {
  hello(FACEBOOK).api('me').then(function (profile) {
    console.log('successful api call');
    dbService.handle_credentials(profile);
    $rootScope.$apply(function () {
      $location.path('/homePage');
    });
  }, function(){
    console.error('something went wrong with authentification');
  });
};

$scope.loginFB = function () {
  hello(FACEBOOK).login($scope.loginHandler());
};

请告诉我这次重构做错了什么。

Answer 1

通过包含参数，您将立即调用函数回调，而不是传递函数引用，这才是您真正想要做的。

$scope.loginFB = function () {
    hello(FACEBOOK).login($scope.loginHandler);
};

如果要将参数传递给回调函数，可以使用以下两种方法之一。

将你的回调包装在一个匿名函数中

$scope.loginFB = function () {
    hello(FACEBOOK).login(function() { return $scope.loginHandler(param); });
};

在现代浏览器中，使用 .bind()。

$scope.loginFB = function () {
    hello(FACEBOOK).login($scope.loginHandler.bind(this, param)));
};