javascript - ng-model 无法绑定(bind)到向导应用程序中的范围

Question

我遇到了 ng-model 无法绑定(bind)到范围的问题。

我的网络应用程序的这一部分的设置就像一个包含三个步骤的向导。

我想在第一步中包含验证，以防止用户在未满足某些要求时进入第二步。但是，为此，我需要使用 ng-model 将 firstName 和 secondaryName 绑定(bind)到范围。

这是到目前为止我的代码，我还包含了一个 plunker here :

wizard.html

<div id="wizard-container" ng-controller="WizardCtrl as vm">

  <div id="wizard-step-container">
    <ul class="nav nav-pills nav-justified">
    <li ng-repeat="step in vm.steps" ng-class="{'active':step.step == vm.currentStep}"><a ng-click="vm.gotoStep(step.step)" href="">{{step.step}}. {{step.name}}</a></li>
    </ul>
  </div>

  <div id="wizard-content-container">
    <div ng-include src="vm.getStepTemplate()"></div>
  </div>

  <div id="wizard-navigation-container">
    <div class="pull-right pull-right-padding">
      <span class="btn-group">
        <button ng-disabled="vm.currentStep <= 1" class="btn btn-default" name="previous" type="button" ng-click="vm.gotoStep(vm.currentStep - 1)"></i>Previous</button>
        <button ng-disabled="vm.currentStep >= vm.steps.length" class="btn btn-primary" name="next" type="button" ng-click="vm.gotoStep(vm.currentStep + 1)">Next</button>
      </span>
      <button ng-disabled="vm.currentStep != vm.steps.length" class="btn btn-success" name="next" type="button" ng-click="vm.save()">Save</button>
    </div>
  </div>

</div>

step1.html

<div class="row">
  <h3 class="text-center">Step 1: Please enter your full name</h3>
  <br/>
  <div class="col-md-6">
    <input type="email" class="form-control" placeholder="First Name" ng-model="formData.firstName">
  </div>
  <div class="col-md-6">
    <input type="email" class="form-control" placeholder="Last Name" ng-model="formData.lastName">
  </div>
</div>
<br>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Please enter your full name.
</div>

wizard.js

angular.module('dingocvWebApp')
  .controller('WizardCtrl', function ($scope, stub) {

    // Wizard methods

    var vm = this;
    vm.currentStep = 1;
    vm.formData = {};

    vm.steps = [
      {
        step: 1,
        name: 'Name',
        template: 'views/wizard/step1.html'
      },
      {
        step: 2,
        name: 'Email',
        template: 'views/wizard/step2.html'
      },
      {
        step: 3,
        name: 'Job Category',
        template: 'views/wizard/step3.html'
      },
    ];

    vm.gotoStep = function(newStep) {
      vm.currentStep = newStep;
      console.log(vm.formData.firstName);
    };

    vm.getStepTemplate = function(){
    for (var i = 0; i < vm.steps.length; i++) {
        if (vm.currentStep === vm.steps[i].step) {
          return vm.steps[i].template;
        }
      }
    };

    // Step 1

    // Step 2

    // Step 3

    $scope.jobCategories = stub.getJobCategories();

    // Yeoman defaults

    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
});

Answer 1

我成功了。这些是调整:

script.js 我声明了 formData 对象，以便我们人类可以轻松看到它的界面:

//Model
vm.currentStep = 1;
vm.formData = {firstName: null, lastName: null};

每个步骤都有一个 isReady() 函数，该函数检查 vm 对象的状态，以确定用户是否可以与该步骤交互:

vm.steps = [
      {
        step: 1,
        name: "First step",
        template: "step1.html",
        isReady: function() { return true; }
      },
      {
        step: 2,
        name: "Second step",
        template: "step2.html",
        isReady: function() { return vm.formData.firstName && vm.formData.lastName; }
      },   
      {
        step: 3,
        name: "Third step",
        template: "step3.html",
        isReady: function() { return true; } // Didn't really care to write this one, sorry :)
      },             
    ];

然后，引入了vm.canGoForward()方法。它检查链中下一步的准备情况(和存在性):

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;
    }

(如果上面的代码看起来有点困惑，可能是因为 currentStep 成员的 1 索引基础；我更希望它是基于 0 的...)

step1.html 文本框确实应该有“vm”。对象标识符添加到 ng-model 值之前。这指示 Angular 引擎获取/设置适当的值。

index.html 前进按钮已更改，因此 ng-disabled 指令将根据 vm.canGoForward() 函数进行操作:

<button ng-disabled="!vm.canGoForward()" class="btn btn-primary" name="next" type="button" ng-click="vm.gotoStep(vm.currentStep + 1)">Next step <i class="fa fa-arrow-right"></i></button>