AngularJS提交處理形式與多個內部控制器

Question

日安好朋友，我剛開始用AngularJS並已做噩夢！

我已經包括使用納克視圖父HTML內的以下部分的HTML表單。

<form name="FormName" ng-submit="addToBasket()" ng-controller="UpdateShoppingBasketCtrl"> 

     <input type="hidden" name="fieldA" ng-model="fieldA" " value="{{fieldA}}"> 

     <div ng-controller="ControllerA">  
      <input type="text" name="fieldB" ng-model="fieldB" typeahead="stop for stop in stopList | filter:$viewValue | limitTo:8" class="form-control"> 
     </div> 

     <div ng-controller="ControllerB">  
        <input type="text" name="fieldC" class="form-control" datepicker-popup="dd/MM/yyyy" ng-model="fieldC" is-open="opened" min="minDate" max="'22-06-2015'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> 
     </div> 

     <div ng-controller="ControllerC" >  
       <button type="button" ng-click="populateFieldDDropDown()"> Show Field D </button> 
       <select id="fieldD" 
         name="fieldD"     
         ng-model="fieldD" 
         ng-options="fieldD as fieldD for fieldD in fieldDList"> 
       </select> 
     </div>  

     <div ng-controller="ControllerD"> 
      <input type="text" class="form-control" name="fieldE" datepicker-popup="dd/MM/yyyy" ng-model="fieldE" is-open="opened" min="minDate" max="'22-06-2015'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> 
     </div> 

     <div> 
       <button type="submit"> Add to shopping basket </button> 
     </div> 
    </form> 

控制器代碼

app.controller('UpdateShoppingBasketCtrl', ['$scope', 'ShoppingBasketFactory', '$location', 
            function ($scope, ShoppingBasketFactory, $location) { 

    //callback for ng-submit 'createCard':  
    $scope.addToBasket= function() { 

     alert('NEW PRODUCT DETAILS = 1 '+$scope.fieldA+" 2 "+$scope.fieldB+" 3 "+$scope.fieldC+" 4 "+$scope.fieldD); 

     //JSON Object is composed here 
     var newProductDetailsJSON = {...........}; 

     ShoppingBasketFactory.create(newProductDetailsJSON, 
       function(data) { 
        //Success Handler 
        $scope.success =true; 
        }, 
        function(error) { 
        //Error Handler 
        $scope.success =false; 
        } 
     ); 
    } 
}]); 

的ControllerA用於處理的預輸入的自舉angularjs插件。 ControllerB用於boostrap angularjs的datepicker插件。 當用戶單擊「顯示字段D」按鈕時，ControllerC用於向頁面添加窗格。 ControllerD用於boostrap angularjs的datepicker插件。 第一次加載頁面時，會從請求中檢索隱藏字段字段A.

因此，當用戶從頂部完成訂貨形式下，所有的行動工作控制器A，d，C，d首先調用。

問題是，當我通過點擊「添加到購物籃」提交按鈕提交整個頁面，我只能檢索隱藏的字段fieldA在我的主控制器UpdateShoppingBasketCtrl（我猜這是因爲它不在控制器內） 。對於其他字段fieldB，fieldC，fieldD，我得到未定義的變量錯誤。

我處理使用$ scope.fieldB，$ scope.fieldC，$ scope.fieldD在UpdateShoppingBasketCtrl控制器的訂單。

我需要捕獲所有表單域即各個嵌套控制器即A，B，C，d中的所有字段在我的主控制器和發送到web服務寧靜作爲JSON對象。

老實說，我認爲這將是沒有道理的，但你又來了。我每天遇到至少2個Anularjs問題，以便通過AngularJS實現一個真正的企業級富客戶端。

任何想法將不勝感激。

Answer 1

UpdateShoppingBasketCtrl有範圍，並且具有ng-controller屬性的所有元素也都有自己的範圍，它們將是UpdateShoppingBasketCtrl作用域的子項。

- scope::UpdateShoppingBasketCtrl 
    - scope::ControllerA 
    - scope::ControllerB 
    - scope::ControllerC 
    - scope::ControllerD 

因爲在某些子範圍存在於您的ng-model，他們總是會設置模型到最近的範圍，這是Controller[ABCD]，而不是UpdateShoppingBasketCtrl你期待。

要處理此情況，您需要在UpdateShoppingBasketCtrl範圍內設置一些屬性，並且它需要爲object。

app.controller('UpdateShoppingBasketCtrl', ['$scope', function($scope){ 
    // This property will be `ng-model` on template. 
    $scope.fields = { 
     'A': '', 
     'B': '', 
     'C': '', 
     'D': '', 
    }; 
}]); 

因爲現在模型對象，你得寫你的模板是這樣的：

<div ng-controller="ControllerD"> 
     <!-- See the `ng-model` attribute --> 
     <input type="text" ng-model="fields.D" /> 
    </div> 

通過這樣做，你的孩子範圍ng-model將其值設置爲具有最接近的範圍fields財產，這是你所期望的UpdateShoppingBasketCtrl。

http://jsfiddle.net/rxS2Q/