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?

Could you put your code in a plunkr or provide more info (like the two controllers and the HTML templates)? It's hard to see what you're trying to do here... — BoDeX, Sep 24 '18 at 13:48
According to [the documentation](https://github.com/likeastore/ngDialog) `close()` should be called with a single parameter that is a value to pass back. So shouldn't you be calling `ngDialog.close(passBackData);`? — Lex, Sep 24 '18 at 14:04
I am really new at Angular, so my level is very low, please ignore my comment if irrelevant or silly, is it possible that you are missing the '$state' into your second controller? — Matt, Sep 24 '18 at 14:10
Not familiar with ngDialog but it seems you wouldn't have the reference to the opened dialog (which may be opened by your first controller ?) in the second controller. What's does the HTML look like? If one of the 2 controllers is the parent of the other, you could use $parent.$scope[...] but it's not really the best... — BoDeX, Sep 24 '18 at 14:12
When you close your dialog from `newClassController`, in the `$scope.cancel` function, does it actually close it and do you reach `console.log(data);` in the first controller? — BoDeX, Sep 24 '18 at 14:35

score 1 · Answer 1 · answered Sep 24 '18 at 14:44

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

score 1 · Accepted Answer · answered Sep 24 '18 at 14:49

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>

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

2 Answers2