Send value from child controller to parent with $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....

Why do you need to do this, since changing the ng-models will update the data in the parent $scope? Can't you just use ng-change? — Amy Blankenship, Nov 02 '15 at 18:08

score 1 · Accepted Answer · answered Nov 02 '15 at 17:56

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

answered Nov 02 '15 at 17:56

taxicala

21,408
7
37
66

Thanks man, i forgot about $scope... Btw can i ask you maybe some stupid question? Okay so i want to take for example values for $scope.objectType and $scope.objectId from function getObjectValues(). And then to use them in other function something like getOjbectValues.objectType + "asdasd" + getOjbectValues.objectID. So should i change function to return maybe some object or?? Thanks – Micko Nov 02 '15 at 18:23
Yes, I would change those functions to return the object instead of set them to the $scope. – taxicala Nov 02 '15 at 18:32
Yeah thanks. I am also confused why default value is not ALL, it is emtpy for option tag in firstController. I also tried with ng-init="auditDropdown = auditDropdown || config.auditDropdown[0].id" and also woth ng-init="auditDropdown = auditDropdown || config.auditDropdown[0].name" but no success... – Micko Nov 02 '15 at 19:04

Send value from child controller to parent with $emit

1 Answers1