控制器独立的步进功能

Question

我有一个AngularJS项目，我使用MD-步进的修改版本，其功能有趣归结为这样：

var enableNextStep = function() { 
      //do not exceed into max step 
      if ($scope.selectedStep >= $scope.maxStep) { 
       return; 
      } 
      //do not increment $scope.stepProgress when submitting from previously completed step 
      if ($scope.selectedStep === $scope.stepProgress - 1) { 
       $scope.stepProgress = $scope.stepProgress + 1; 
      } 
     }; 

     var completeCurrentStep = function (CurrentStep) { 
      $scope.stepData[CurrentStep].completed = true; 
     }; 

     $scope.moveToNextStep = function moveToNextStep() { 
      if ($scope.selectedStep < $scope.maxStep) { 
       enableNextStep(); 
       $scope.selectedStep = $scope.selectedStep + 1; 
       completeCurrentStep($scope.selectedStep - 1); //Complete After changing Step 
      } 
     }; 

     $scope.moveToPreviousStep = function moveToPreviousStep() { 
      if ($scope.selectedStep > 0) { 
       $scope.selectedStep = $scope.selectedStep - 1; 
      } 
     }; 

的问题是，我想在两个不同的控制器中使用这四个函数（以便不重复它们），它们具有不同的值stepProgress,selectedStep和maxStep值。我找不到使用服务的方法，但我可能会对AngularJS的工作方式感到困惑，因为我更习惯Python。

谢谢。

Answer 1

将该功能抽象为接受回调数组和控制器ng-model的工厂将使其更具可重用性。当然，最终你想要的API取决于你。目标是你不需要工厂内的任何业务，它不应该担心回调内部的问题，它只是通过它们的步骤。

/** 
* @param steps {array} - array of callbacks 
*/ 

function stepperFactory(steps) { 
    iterate(0, steps); 
} 

function iterate(current, steps) { 
    if (!steps[current]) 
    return; 
    if (typeof steps[current] === 'function') 
    // pass an async "done" callback 
    // so your array of input callbacks can be async 
    // you could also use promises or $q for this 
    steps[current](() => iterate(current + 1, steps)); 
} 

所以你暴露的API将是这样的：

['stepperFactory', function(stepperFactory) { 
    this.model = { step: 0, msg: 'start' }; 
    this.steps = [ 
    (done) => { 
     this.model.step++; 
     done(); 
    }, 
    (done) => { 
     setTimeout(() => { 
     this.model.msg = '3rd step'; 
     this.model.step++; 
     done(); 
     }); 
    } 
    ]; 
    stepperFactory(this.model, this.steps); 
}] 

Answer 2

您可以使用服务来分享这将需要maxStep，stepProgress等作为参数的函数，而是修改$scope，他们将返回更新的值。

在服务：

function moveToPreviousStep(step) { 
    if (step > 0) { 
    return (step - 1); 
    } 
    return step; 
}; 

和控制器

function moveToPreviousStep() { 
    $scope.selectedStep = service.moveToPreviousStep($scope.selectedStep); 
} 
$scope.moveToPreviousStep = moveToPreviousStep;