Question

我正在尝试将代码vm.canGoForward从我的控制器移到服务中以隐藏实现细节。

在更改代码之前

这很好。

查看：

<button ng-disabled="!vm.canGoForward()" class="btn btn-primary" name="next" type="button" ng-click="vm.gotoStep(vm.currentStep + 1)">

控制器：

var vm = this;
vm.currentStep = 1;
vm.steps = WizardService.getWizardSteps(vm.formData);

vm.canGoForward = function() {
  var res = true,
  i,
  nextStateIndex = vm.currentStep + 1;

  if (nextStateIndex > vm.steps.length) {
    return false;
  }
  for (i = 1; res && i <= nextStateIndex; i++) {
    res = (res && vm.steps[i-1].isReady());
  }

  return !!res;
};

服务

var wizardService = {
  getWizardSteps: getWizardSteps
};
return wizardService;

function getWizardSteps(formData) {
  var wizardSteps = [
    {
      step: 1,
      name: 'Name',
      template: 'views/wizard/step1.html',
      isReady: function() { return true; }
    },
    {
      step: 2,
      name: 'Email',
      template: 'views/wizard/step2.html',
      isReady: function() { return formData.firstName && formData.lastName; }
    },
    {
      step: 3,
      name: 'Job Category',
      template: 'views/wizard/step3.html',
      isReady: function() { return formData.email; }
    }
  ];
  return wizardSteps;
}

代码更改后

查看

保持不变

控制器

var vm = this;
vm.currentStep = 1;
vm.steps = WizardService.getWizardSteps(vm.formData);
vm.canGoForward = WizardService.canGoForward(vm.currentStep, vm.steps);

服务

var wizardService = {
  getWizardSteps: getWizardSteps,
  canGoForward: canGoForward
};
return wizardService;

function getWizardSteps(formData) {
  var wizardSteps = [
    {
      step: 1,
      name: 'Name',
      template: 'views/wizard/step1.html',
      isReady: function() { return true; }
    },
    {
      step: 2,
      name: 'Email',
      template: 'views/wizard/step2.html',
      isReady: function() { return formData.firstName && formData.lastName;  }
    },
    {
      step: 3,
      name: 'Job Category',
      template: 'views/wizard/step3.html',
      isReady: function() { return formData.email; }
    }
  ];
  return wizardSteps;
}

function canGoForward(currentStep, steps) {
  console.log(steps);

  var res = true,
  i,
  nextStateIndex = currentStep + 1;

  if (nextStateIndex > steps.length) {
    return false;
  }
  for (i = 1; res && i <= nextStateIndex; i++) {
    res = (res && steps[i-1].isReady());
  }

  return !!res;
}

我现在收到以下错误：TypeError: v2.canGoForward is not a function。我该如何解决？

Answer 1

在您的第二个版本中，以下行实际上会在现场调用WizardService.canGoForward，而不是分配它：

vm.canGoForward = WizardService.canGoForward(vm.currentStep, vm.steps);

分配的是该调用的返回值，这显然不是函数，因此稍后尝试调用时会出现错误消息。

如果要分配函数，并确保在以后调用时传递参数，则使用bind：

vm.canGoForward = WizardService.canGoForward.bind(WizardService, vm.currentStep, vm.steps);

v2.canGoForward不是一个函数

1 个答案: