在angularjs/javascript中将参数传递给命名回调函数的问题

Issue with passing arguments to a named callback function in angularjs/javascript

本文关键字：回调 函数 问题 参数传递 angularjs javascript      更新时间：2023-09-26

我想分解出 angularjs $http成功回调函数，以便我有一个命名的回调函数，而不是有两个（或 N 个）匿名回调函数。

以下是两个控制器：

function CreateCurriculumCtrl($scope, $http, $location, select2Options){
    $scope.curriculumInfo = {};
    $scope.curriculumInfo.statusOK = true;
    $scope.select2Options = select2Options; 
    $scope.saveCurriculum = function(){
        $http.post('bignibou/curriculum/new', $scope.curriculumInfo).success(function(curriculumInfo) {
            if(curriculumInfo.statusOK == true){
                $scope.curriculumInfo.statusOK=true;
                $location.path('/view/'+curriculumInfo.curriculum.id);
            }
            else{
                $scope.curriculumInfo.statusOK = false;
                $scope.curriculumInfo.errors = curriculumInfo.errors;
            }           
        });
    };
}
function EditCurriculumCtrl($scope, $http, $location, select2Options, $routeParams){
    $scope.curriculumInfo = {};
    $scope.curriculumInfo.statusOK = true;
    $scope.select2Options = select2Options;
    $scope.id = $routeParams.id;
    $http.get('/bignibou/utils/findCurriculumById.json',{params: {id: $routeParams.id}}).success(
            function(curriculum){
                $scope.curriculumInfo.curriculum = curriculum;
            });
    $scope.editCurriculum = function(){
        $http.post('bignibou/curriculum/edit/'+$routeParams.id, $scope.curriculumInfo)
        .success(function(curriculumInfo) {
            if(curriculumInfo.statusOK == true){
                $scope.curriculumInfo.statusOK=true;
                $location.path('/view/'+curriculumInfo.curriculum.id);
            }
            else{
                $scope.curriculumInfo.statusOK = false;
                $scope.curriculumInfo.errors = curriculumInfo.errors;
            }           
        });
    };
}

我不确定如何做到这一点，因为将成为命名回调函数的内容有几个依赖项（即 $scope 和 $location）。

如果我从 angularjs 控制器中提取函数（命名回调），则命名回调不再访问其依赖项。

任何人都可以帮助分解成功回调函数并确保满足依赖项吗？

只需将它们作为参数传递即可。

首先，$http.post期望回调接受一个参数。所以我们编写了post期望的函数：

function (curriculumInfo) {
    // .....
}

但是函数的主体需要访问$scope和$location。因此，我们编写了一个接受这些函数并返回post期望的函数：

function (scope,location) {
    return function (curriculumInfo) {
        // ... use scope and location in here
    }
}

现在我们可以适当地命名函数了。让我们看看，它正在处理对新课程的响应，所以我称之为new_curriculum_callback或new_curriculum_callback或handle_new_curriculum来表明它是一个回调：

function handle_new_curriculum (scope,location) {
    return function (curriculumInfo) {
    }
}

现在你可以调用它来将回调函数返回给post：

$http
    .post('bignibou/curriculum/new',$scope.curriculumInfo)
    .success(handle_new_curriculum($scope,$location));

创建一个课程服务，并将对后端的每个调用重构到其中。您的控制器不应该关心如何获取数据。将课程表服务注入控制器。然后，您的控制器只需调用课程表服务上的函数即可获取数据。

angular.module('resources.curriculum', ['..'])
.factory('Curriculum', function ($http, $q) {
  return {
    create: function(dataToSave) {
      var deferred = $q.defer()
      http.get('...').success(function(data) {
        deferred.resolve(data)
      }).error(function(err) {
        deferred.reject(err)
      })
      return deferred.promise
    }
  }
})
.controller('SomeCtrl', function($scope, Curriculum) {
  $scope.someValue = Curriculum.create($scope.someDataToSave)
})

您可能希望创建angularjs服务并在单击某个按钮时调用特定请求。这样，您就可以以同步方式调用请求。

相关文章：