javascript - 使用 $emit 将值从子 Controller 发送到父 Controller

Question

所以我想将下拉列表和输入文本字段中的值从 FirstController 发送到 MainController，并将日期选择器中的值从 SecondController 发送到 MainController。我尝试使用 $emit 和 $on 但没有成功。也许我以错误的方式从这些输入中获取值...您可以在下面找到我的代码。

主 Controller

'use strict';

angular.module('app').controller('MainController', ['$scope',
 function($scope) {
  $scope.$on('send-type-id', getObjectValues);
  $scope.$on('send-date', getDateValues);

  function getObjectValues(e, selectedObjectType, inputObjectId){
   $scope.objectType = selectedObjectType;
   $scope.objectId = inputObjectId;
   console.log($scope.objectType);
   console.log($scope.objectId);
  }

  function getDateValues(e, dateFrom, dateTo){
   $scope.startDate = dateFrom;
   $scope.endDate = dateTo;
   console.log($scope.startDate);
   console.log($scope.endDate);
  } 
 }
]);

第一个 Controller

    angular.module('app').controller('FirstController',['$scope',
   function($scope){
    $scope.$emit('send-type-id',auditDropdown, selectId);
 }
])

FirstController View

  <div ng-controller="SelectionController">
    <div class="well-panel">
        <div class="panel-body">
            <select class="form-control" ng-model="auditDropdown" ng-init="auditDropdown = auditDropdown || config.auditDropdown[0]"
                    ng-options="option.id as option.name for option in config.auditDropdown">
            </select>
            <input class="form-control" ng-model="selectId" type="text">

            <div ng-include="'modules/audit/views/components/audit-datepickers.client.view.html'"></div>

            <div>
                <button class="btn btn-sm btn-default" type="button">
                    {{'audit.navigation.button.generateAuditReport.btn'| translate}}
                </button>
            </div>
        </div>
</div>

选项配置文件

 ...
 "auditDropdown": [
   {"id": "Name1", "name": "Name 1"}, 
   {"id": "Name2", "name": "Name 2"},
   {"id": "Name3", "name": "Name 3"},  
 ]
...

第二个 Controller

 angular.module('app').controller('SecondController',['$scope',
       function($scope){
        $scope.$emit('send-date',auditDropdown, selectId);
     }
    ])

第二个 Controller View

<div ng-controller="SecondController">
    <section id="datepickerSection">
        <div>
            <input
                    type="date"
                    ng-model="startDate"
                    class="form-control"
                    placeholder="mm/dd/yyyy"
                    datepicker-popup
                    />
        </div>
        <div>
            <input
                    type="date"
                    ng-model="endDate"
                    class="form-control"
                    placeholder="mm/dd/yyyy"
                    datepicker-popup
                    />
        </div>
    </section>
</div>

编辑

我收到错误，指出auditDropDown 在 SecondController 中未定义......

Answer 1

您应该从 $scope 中获取 auditDropDown，否则 js 将查找名为 auditDropDown 的变量(与 selectId):

$scope.$emit('send-type-id', $scope.auditDropdown, $scope.selectId);
$scope.$emit('send-date',$scope.auditDropdown, $scope.selectId);