Javascript AngularJS提交处理具有多个内部控制器的表单

朋友们好，我刚开始学AngularJS，一直在做噩梦

我使用ng视图将以下部分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>

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 Web服务

我真的以为这很容易，但你又来了。在使用AngularJS实现真正的企业富客户端的过程中，我每天至少会遇到2个Anularjs问题

---

任何想法都将受到欢迎。

UpdateShoppingBasketCtrl

具有作用域，所有具有

ng controller

属性的元素也将具有自己的作用域，它们将是

UpdateShoppingBasketCtrl

作用域的子元素

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

由于您的

ng模型

存在于某些子作用域下，因此他们总是将模型设置为最近的作用域，即

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

---

你好，伊格巴尔，谢谢你的回复，但我不明白你的解释。请你再亮一点好吗。

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