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插件。当用户点击按钮＆＃34;显示字段D＆＃34;时，ControllerC用于向页面添加窗格。 ControllerD用于boostrap angularjs的datepicker插件。第一次加载页面时，会从请求中检索隐藏字段fieldA。

因此，当用户从上到下完成订购表单并且所有操作都有效时，首先调用控制器A，D，C，D。

问题是当我通过点击＆＃34;添加到购物篮＆＃34;提交整个页面时提交按钮，我只能在我的主控制器UpdateShoppingBasketCtrl中检索隐藏字段fieldA（我想这是因为它不在控制器内）。我得到其他字段fieldB，fieldC，fieldD的未定义变量错误。

我正在使用$ scope.fieldB，$ scope.fieldC，$ scope.fieldD处理UpdateShoppingBasketCtrl控制器中的订单。

我需要捕获所有表单字段，即各种嵌套控制器中的所有字段，即主控制器中的A，B，C，D，并作为JSON对象发送到一个宁静的Web服务。

老实说，我认为这不是一件容易的事情，但你又去了。在我使用AngularJS实现真正的企业级富客户端的过程中，我每天至少遇到2个Anularjs问题。

任何想法都将受到赞赏。

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/

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

1 个答案: