NG-模型未能綁定到範圍，我有其中的NG-模型未能綁定到範圍問題的嚮導應用，

Question

。

我的web應用程序的這一部分的設置類似於三個步驟的嚮導。

我想包括的第一步，以防止用戶到達第二個步驟，如果某些不符合要求的驗證。但是，爲此，我需要使用ng-model將firstName和secondName綁定到範圍。

這裏是我的代碼，到目前爲止，我還加入了一個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> 

嚮導.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()我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模型值。這指示角引擎獲取/設置適當的值。

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