контроллер независимых функций шаговых

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, который вы хотите, зависит от вас. Цель состоит в том, что вы не хотите, чтобы внутри фабрики был $scope, он не должен беспокоиться о том, что находится внутри обратных вызовов, он просто проходит через них.

/** 
* @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)); 
} 

И так апи вы подвергаете бы как:

['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;