AngularJS提交處理具有多個內部控制器的表單

Question

美好的一天好朋友，我剛剛開始使用AngularJS並且一直在做噩夢！

我使用ng-view在父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用於處理typeahead boostrap angularjs插件。 ControllerB用於boostrap angularjs的datepicker插件。 當用戶單擊“顯示字段D”按鈕時，ControllerC用於向頁面添加窗格。 ControllerD用於boostrap angularjs的datepicker插件。 第一次加載頁面時，從請求中檢索隱藏字段fieldA。

因此，當用戶從上到下完成訂購表單並且所有操作都有效時，首先調用控制器A，D，C，D。

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

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

我需要捕獲所有表單字段，即各種嵌套控制器中的所有字段，即主控制器中的A，B，C，D，並作為JSON對象發送到restful webservice。

老實說，我認為這不是一件容易的事情，但你又去了。 在我使用AngularJS實現真正的企業富客戶端的過程中，我每天至少遇到2個Anularjs問題。

任何想法將不勝感激。

Answer 1

UpdateShoppingBasketCtrl具有范圍，所有具有ng-controller屬性的元素也將具有自己的范圍，並且它們將是UpdateShoppingBasketCtrl范圍的子UpdateShoppingBasketCtrl 。

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

因為ng-model存在UpdateShoppingBasketCtrl個子范圍內，所以它們總是將模型設置為最近的范圍，即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/