複数のコントローラを使って角型jsフォームを送信

Question

こんにちは皆、mongodbとmd-datepickerから複数のコントローラを持つ1つのフォームを持っています（$ watch）with dinamic min、angle-meteor appの最大日に問題がありますフォームを送信し、MD-オートコンプリート& MD-日付ピッカーの値を取得する：

`<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

これを行うには、プロトタイプの継承を利用できます。最初にng-model変数を含むオブジェクトをparent scopeに定義します。親コントローラに定義するか、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>