Question

大家好我有1个表格有多个控制器，多个md-autocomplete来自mongodb和md-datepicker有（$ watch）用于dinamic min，最大日在angular-meteor应用程序我有提交表单的问题并获得值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.element：

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

但仍然没有任何建议或示例将节省我的一天。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Angular js表单提交多个控制器

1 个答案: