how to pass back the data from dialog to controller in angularjs?

Question

below is my first controller

.controller('configManagementCtrl', ['$scope', 'deConfigService', 'ngDialog', '$state', 'notificationService',
    function ($scope, deConfigService, ngDialog, $state, notificationService) {

        $scope.loadDetails = function () {
            ....
        };

        $scope.openModal = function () {
            var newClassDialog = ngDialog.open({
                template: 'views/modals/newClassModal.html',
                closeByEscape: false,
                controller: 'newClassController',
                className: 'ngdialog-theme-default',
                width: 600
            });

            newClassDialog.closePromise.then(function (data) {
                console.log(data);
                if (data.passBackData.value === 2) {
                    $scope.loadDetails();
                    // $state.go('app.config', {}, {reload: true, inherit: false});
                    // $scope.loadDetails();
                }
            });
        };

    }])

In my second controller am trying to send some data to my parent controller as shown below

.controller('newClassController', ['$scope', 'ngDialog', 'deConfigService', 'notificationService',
    function ($scope, ngDialog, deConfigService, notificationService) {
        $scope.classObj = {};
        var passBackData = [];
        $scope.cancel = function () {
            passBackData.push({'closeVal': 1});
            console.log(passBackData);
            ngDialog.close(1, passBackData);
        };
        $scope.create = function (isFormValid) {
            if (isFormValid) {
                $scope.classObj.added_dt = (new Date()).toISOString();
                $scope.classObj.class_id = 0;
                deConfigService.createClass($scope.classObj, function (response) {
                    if (response.data) {
                        console.log(response.data);
                        passBackData.push(response.data.data);
                        notificationService.addSuccess('Class created successfully');
                    }
                    else {
                        notificationService.addError('Error!! Please try later');
                    }
                });
                ngDialog.close(1, 2);
            }
        };
    }])

below is the ngdialog html. It has 2 textbox which am able to get data to my second controller but not able to send response back to first controller

   <form ng-submit="create(form.$valid)" name="form" novalidate="">
                <div class="form-flex ng-pristine ng-invalid ng-touched">
                    <div class="form-tile">
                        <label>Class name </label>
                        <input type="text" ng-model="classObj.name" name="form.name" placeholder="Enter the name of your class" required>

                        <label>Class description</label>
                        <textarea ng-model="classObj.description" name="form.description" placeholder="Enter a short description" rows="5" required></textarea>
                    </div>
                </div>

                <button type="submit" ng-click="submittedForm = true;" ng-disabled="form.$invalid" class="mat-raised-button-blue"> Create </button>
                <button class="mat-raised-button" style="float:right; width:155px" ng-click="cancel();"> Cancel </button>
        </form>

Am pushing some objects to the array and trying to send but not able to receive it from parent controller.

Where am doing wrong?

Answer 1

After a closer read of the documentation, it looks like you need to call .close() passing the id of the dialog and the value to return from the dialog's controller. In your parent controller the object passed back to your closePromise callback has id and value properties. You'll need to get whatever you're passing back via the value property (i.e. data.value.whateverYouAreReturning). Here is a simple example that returns an object with a single string property.

angular.module('app', ['ngDialog'])
  .controller('ctrl', ($scope, ngDialog) => {
    $scope.returnedValue = "";
    $scope.openModal = function() {
      var newClassDialog = ngDialog.open({
        template: 'dialogTemplate',
        closeByEscape: false,
        controller: 'dialogCtrl',
        className: 'ngdialog-theme-default',
        width: 600
      });

      newClassDialog.closePromise.then(function(data) {
          $scope.returnedValue = data.value.result;
      });
    };
  })
  .controller('dialogCtrl', ($scope, ngDialog) => {
    var id = ngDialog.getOpenDialogs()[0];
    $scope.returnValue = "";
    $scope.close = () => {
      ngDialog.close(id, { result: $scope.returnValue });
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/js/ngDialog.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/css/ngDialog.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.4.0/css/ngDialog-theme-default.min.css">
<div ng-app="app" ng-controller="ctrl">
  <button ng-click="openModal()">Open Modal</button>
  
  <p>Returned from dialog: {{ returnedValue }}</p>  

  <script type="text/ng-template" id="dialogTemplate">
    <h1>ngDialog Sample</h1>
    <p>
      <label>Enter a value to return: </label>
      <input type="text" ng-model="returnValue" />
    </p>
    <p><button ng-click="close()">Close</button></p>
  </script>
</div>

Answer 2

This might work (can't test it unless you can share a plunker):

.controller('configManagementCtrl', ['$scope', 'deConfigService', 'ngDialog', '$state', 'notificationService', function ($scope, deConfigService, ngDialog, $state, notificationService) {

    $scope.loadDetails = function () {
        ....
    };

    $scope.openModal = function () {
        $scope.newClassDialog = ngDialog.open({
            template: 'views/modals/newClassModal.html',
            closeByEscape: false,
            controller: 'newClassController',
            className: 'ngdialog-theme-default',
            width: 600
        });

        $scope.newClassDialog.closePromise.then(function (data) {
            console.log(data);
            if (data.passBackData.value === 2) {
                $scope.loadDetails();
                // $state.go('app.config', {}, {reload: true, inherit: false});
                // $scope.loadDetails();
            }
        });
    };

}])

and in the other controller:

.controller('newClassController', ['$scope', 'ngDialog', 'deConfigService', 'notificationService',
    function ($scope, ngDialog, deConfigService, notificationService) {
        $scope.classObj = {};
        var passBackData = [];
        $scope.cancel = function () {
            passBackData.push({'closeVal': 1});
            console.log(passBackData);
            $parent.$scope.newClassDialog.close(1, passBackData);
        };
        $scope.create = function (isFormValid) {
            if (isFormValid) {
                $scope.classObj.added_dt = (new Date()).toISOString();
                $scope.classObj.class_id = 0;
                deConfigService.createClass($scope.classObj, function (response) {
                    if (response.data) {
                        console.log(response.data);
                        passBackData.push(response.data.data);
                        notificationService.addSuccess('Class created successfully');
                    }
                    else {
                        notificationService.addError('Error!! Please try later');
                    }
                });
                $parent.$scope.newClassDialog.close(1, 2);
            }
        };
    }])