Pass a value on button click inside an ng-Dialog

Question

I am trying to pass value from an ng-Dialog.

HTML:

 <div class="col-md-12" style="text-align:center" ng-controller="getReservationController">
            <label ng-show="!data.length" >No reservations found!</label>
            <div  class="widget widget-table action-table" ng-repeat="reservation in data">
                <div ng-show="data.length" class="widget-content table-container"  style="overflow:auto">

                    <table  ng-table="reservationsList" class="table table-striped table-bordered" wt-responsive-table style="font-size: smaller;text-align:center; display:block;overflow-x:scroll">
                        <tr >
                            <td data-title="'#'">{{ $index+1 }}</td>
                            <td data-title="'Name'" ui-sref="employee.edit({id: reservation.employee.id})" sortable="'employee.name'" filter="{ 'employee.name': 'text' }" style="width:230px">
                                <a ui-sref="employee.edit({id: employee.id})" tooltip="View or Edit  employee" tooltip-trigger tooltip-animation="false" tooltip-placement="bottom" style="color:#23527c">{{reservation.employee.firstName +""+reservation.employee.lastName}}</a>
                            </td>
<td data-title="'Reject'">
                                <a tooltip="Reject employee" tooltip-trigger tooltip-animation="false" tooltip-placement="bottom"  data-placement="left" data-toggle="tooltip" data-original-title="reject" ng-show="data.currentUser==reservation.account.programManager.id || data.role == 'HR'" ng-click="rejectEmployee"><svg class="glyph stroked cancel"><use xlink:href="#stroked-cancel" /></svg></a>
                            </td>
                        </tr>
                    </table>
                </div>
                <script type="text/ng-template" id="templateId">
                    <div class="media-body act-media-body">
                        <h5 class="success" style="color:red">Are you sure you want to reject this reservation?</h5>
                        If yes, please specify reason : <textarea type="text" ng-model="reservation.account.name" placeholder="test" style="height:100px;resize: none;"/>
                        <button  class="ngdialog-button" ng-click="rejectEmployeeButton(reservation.employee.id)">Confirm</button>
                    </div>
                </script>
            </div>
        </div>

On click of Reject button inside the table, the Dialog is coming up.

Controller :

myApp.controller('getReservationController', ['$scope', 'reservationServices', 'dataTable', '$rootScope', '$location', '$filter', 'ngDialog', '$window', function ($scope, reservationServices, dataTable, $rootScope, $location, $filter, ngDialog, $window) {
    reservationServices.getReservations().then(function (result) {
        $scope.data = result.data;
        $scope.rejectEmployee = function () {
             ngDialog.open({
                template: 'templateId',
                closeByDocument: true,
                closeByEscape: true,
                preCloseCallback: function (value) {

                },
                scope: $scope
            });

        }
        $scope.rejectEmployeeButton = function (id) {
            reservationServices.rejectEmployee(id).then(function (result) { 
                    ngDialog.openConfirm({
                        template:
                            '<p>Rejected the employee!</p>',
                        plain: true,
                        className: 'ngdialog-theme-default'
                    })
                    $location.path("/talents");
                    });
        }

I noticed that the Id is not getting passed upon button click : rejectEmployeeButton(reservation.employee.id)

Also faces a similar issue while posting the data which is inside the text area in the dialog. But I can figure it out once i find a solution to pass the value on button click.

What am i doing wrong?

Answer 1

Better way is to pass the object and access the id inside the controller,

ng-click="rejectEmployeeButton(reservation)"

Controller:

$scope.rejectEmployeeButton = function (reserObj) {
   var id = reserObj.employee.id;
}

Answer 2

You can define controller for OpenDialoge and write all code inside that controller function.

 ngDialog.open({
            template: 'templateId',
            closeByDocument: true,
            closeByEscape: true,
            controller:function()
            {
                this.rejectEmployeeButton = function (id) {

                    rejectEmployeeButton(id);

                };

            },

     rejectEmployeeButton=function()
        { 
        // Do somthing  open dialog
        }

You can try like this.