带有多个控制器的Angular js表单提交

Question

大家好，我有 1 个带有多个控制器的表单，带有来自 mongodb 的多个 md-autocomplete 和带有 ($watch) 的 md-datepicker，用于 angular-meteor 应用程序中的最小、最大天数我在提交表单时遇到问题并获得值md-autocomplete 和 md-datepicker ：

`<form  ng-controller="SubmitCtrl" style="padding-left: 120px;" ng-submit="submit()" name="Form">
<div ng-controller="datesCtrl as vm" ng-form name="DateForm" id="myDatePicker">
    <md-input-content>
        <md-datepicker
        onkeydown="return false"
        name="myDate"
        ng-model="myDate"
        md-hide-icons="all"

        md-current-view="year"
        md-min-date="ctrl.minDate"
        md-max-date="ctrl.maxDate"
        md-open-on-focus="true">
        </md-datepicker>
    </md-input-content>
    {{myDate | date: "yyyy-MM-dd"}}
    </div>
    <div ng-controller="Nationality as vm" class="form-group" ng-form name="NationalityForm">
    <md-input-content  id="myDatePicker">
        <md-autocomplete flex 
       md-input-name="NationalityField"
      ng-model="NationalityField"
      md-input-minlength="3"
     md-no-cache="true"
    md-selected-item="selectedItem"
    md-search-text="searchText"
    md-items="item in vm.getMatches(searchText)"
    md-item-text="item.country_name"

 md-floating-label="Nationality">
<md-item-template>
<span>{{item.country_name}} -</span>
<span 
md-highlight-text="vm.searchText"
md-highlight-flags="^i">{{item.country_code_2_letter}}</span>
</md-item-template>

</md-autocomplete>
<p>country:{{selectedItem.country_name + selectedItem.country_code_2_letter}}</p>
    </md-input-content>

`

我的值分别在每个控制器中可用，我可以 console.log ： console.log($scope.selectedItem); 我的提交控制器是：

angular.module('GntApp')
.controller('SubmitCtrl', ['$scope', function($scope) {
$scope.list = [];
  $scope.submit = function(){


    if ($scope.test) {
      $scope.list.push(this.test);
      console.log($scope.test);
    }
    if ($scope.myDate) {
      $scope.list.push(this.myDate);
      console.log($scope.$parent.myDate);
    }

我知道这是错误的，但是当我阅读时，我应该从另一个带有父子的控制器中获取价值，但是我找不到好的文档，我什至尝试了 angular.element：

$scope.Date = angular.element(myDatePicker);
    console.log($scope.Date); 

但仍然没有任何建议或示例可以节省我的时间。

Answer 1

为此，您可以利用原型继承。在 parent scope 中定义一个 object，其中首先包含您的 ng-model 变量；通过在父控制器中定义它或使用ng-init。当在子控制器中访问变量时，它们将在其父作用域的原型中进行搜索，并且不会在子作用域中定义任何变量。另一种解决方案（以下代码中的parentVM.var3）是使用controller as 的父视图模型。这样，您无需定义新对象，但必须为每个变量添加 parentVM。

angular.module('app',[]).controller('ParentController', function($scope){
$scope.myObject={};
$scope.logVariables = function(){
  console.log($scope.myObject);
  console.log($scope.parentVM.var3);
}
})
.controller('ChildController1', function(){
})
.controller('ChildController2', function(){
})
.controller('ChildController3', function(){
});

<div ng-app="app">
<div ng-controller="ParentController as parentVM">
  <div ng-controller="ChildController1 as childVM1">
      <input ng-model="myObject.var1">
       <p ng-bind="myObject.var1"></p>
  </div>
  <div ng-controller="ChildController2 as childVM2">
      <input ng-model="myObject.var2">
       <p ng-bind="myObject.var2"></p>
  </div>
  <div ng-controller="ChildController3 as childVM3">
      <input ng-model="parentVM.var3">
       <p ng-bind="parentVM.var3"></p>
  </div>
  
  <p>Access from parent:</p>
  <label>myObject.var1:</label>
  <span ng-bind="myObject.var1"></span>
  <label>myObject.var2:</label>
  <span ng-bind="myObject.var2"></span>
  <label>var3:</label>
  <span ng-bind="parentVM.var3"></span>
  <button ng-click="logVariables()">Log Variables</button>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>