Angulaire js forme soumettre avec plusieurs contrôleur

Question

Salut tout le monde j'ai 1 formulaire avec plusieurs contrôleur avec plusieurs md-autocomplete de mongodb et md-datepicker avec ($ watch) pour dinamic min, max jour dans l'application angulaire-météore J'ai un problème avec soumettre le formulaire et obtenir la valeur de 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> 

`

ma valeur est disponible dans chaque contrôleur séparément et je peux console.log: console.log($scope.selectedItem); et mon contrôleur est soumettre :

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); 
    } 

Je sais que mal, mais comme je l'ai lu que je devrais obtenir la valeur d'un autre contrôleur avec enfant parent, mais je ne peux pas trouver une bonne documentation pour cela que j'essaie même angular.element:

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

mais ne fonctionne toujours pas toute suggestion ou exemple sauvera ma journée.

Answer 1

Pour cela, vous pouvez utiliser l'héritage prototypique . Définissez un objet dans le parent scope qui contient vos variables ng-model d'abord; soit en le définissant dans le contrôleur parent, soit en utilisant ng-init. Lorsque les variables accédées dans les contrôleurs enfants, elles seront recherchées dans leur prototype qui est la portée parent et aucune variable ne sera définie dans les étendues enfant. Une autre solution (parentVM.var3 dans le code suivant) serait d'utiliser le modèle de vue parent en utilisant controller as. De cette façon, vous n'avez pas besoin de définir un nouvel objet mais vous devez ajouter parentVM pour chacune de vos variables.

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>