如何在 angularjs 中将数据从对话框传回控制器？

Question

下面是我的第一个控制器

.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();
                }
            });
        };

    }])

在我的第二个控制器中，我正在尝试向我的父控制器发送一些数据，如下所示

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

下面是 ngdialog html。它有 2 个文本框，可以将数据发送到我的第二个控制器，但无法将 response 发送回第一个控制器

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

正在将一些对象推送到数组并尝试发送但无法从父控制器接收它。

哪里做错了？

Answer 1

这可能有效（无法测试，除非你可以分享一个 plunker）：

.controller('configManagementCtrl', ['$scope', 'deConfigService', 'ngDialog', '$state', 'notificationService', 函数（$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();
            }
        });
    };

}])

在另一个控制器中：

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

Answer 2

仔细阅读文档后，您似乎需要调用 .close() 将对话框的 ID 和值从对话框的控制器传递给 return。在您的父控制器中，传递回您的 closePromise 回调的对象具有 id 和 value 属性。您需要通过 value 属性（即 data.value.whateverYouAreReturning）获取您传回的任何内容。这是一个简单的示例，其中 returns 是一个具有单个字符串的对象属性.

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>

如何在 angularjs 中将数据从对话框传回控制器？

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

javascript

angularjs

ng-dialog