ng-modelがウィザードアプリケーションのスコープにバインドできません

Question

ng-modelがスコープにバインドできないという問題が発生しています。

このWebアプリケーションのセクションは、ウィザードのように3つの手順で設定します。

特定の要件が満たされていない場合、ユーザーが第2ステップに到達しないように、最初の手順で検証を含める必要があります。しかし、これを行うには、firstNameとsecondNameをスコープにバインドするためにng-modelを使用する必要があります。

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> 

ウィザード：ここ

は私のコードは、これまでのところですが、私はまたplunker hereを含めました.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

私はそれを働かせました。そのインターフェースは、私たち人間のため容易に見えるように、私はformDataオブジェクトを宣言し

script.js：

//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()私は、 thodが導入されました。これは、チェーン内の次のステップの準備（および存在）をチェック：

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値の前に付加されたオブジェクト識別子。これは角度エンジンに適切な値を取得/設定するよう指示します。検証が発生し

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