控制器獨立的步進功能

我有一個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。

謝謝。

來源

2016-09-20 Raphaël Gomès

將該功能抽象爲接受回調數組和控制器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); 
}]

來源

2016-09-20 12:25:31

你好，謝謝你的回答。你能告訴我這些超時和'（完成）'的目的嗎？ –

其代碼註釋 –

-1

您可以使用服務來分享這將需要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;

來源

2016-09-20 12:35:42

是的，我已經考慮過這個選擇，但它仍然不夠幹，我可能只是堅持目前的重複。 –

控制器獨立的步進功能

回答

相關問題