Angular JS表格与多个控制器提交

Question

嗨，大家，我有1个表格，带有多个控制器，带有多个MD-autocomplete，来自MongoDB和MD-datepicker，with（$ Watch）for Dinamic Min，Max Day，Angular-Metleor应用程序我有问题提交表格并获得MD-AutoComplete的价值＆amp;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.ement：

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

，但仍然无法做任何建议或示例可以节省我的一天。

Answer 1

要执行此操作，您可以利用原型继承。在包含您的 ng-model 变量的parent scope中定义AN 对象首先;通过在父控制器中定义它或使用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>