使用$ emit将值从子级控制器发送到父级

Question

So i want to send values from dropdown list and input text field to MainController from FirstController and values from datepickers from SecondController to MainControler. I am trying to use $emit and $on but no success. Maybe i am getting values from these inputs in wrong way... You can find my code below.

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

FirstController

    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>

config file for options

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

SecondController

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

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

EDIT

I am getting error that auditDropDown is undefined in SecondController....

Answer 1

You should fetch auditDropDown from the $scope , otherwise js will look for a variable called auditDropDown (same for selectId ):

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