как передать данные из диалога в контроллер в angularjs? - PullRequest
Новая
       3

как передать данные из диалога в контроллер в angularjs?

0 голосов
/ 24 сентября 2018

ниже - мой первый контроллер 

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

ниже - HTML-код ngdialog.Он имеет 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>

Я помещаю некоторые объекты в массив и пытаюсь отправить, но не могуполучить его от родительского контроллера.

Где я делаю не так?

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

После более внимательного прочтения документации кажется, что вам нужно позвонить .close(), передав идентификатор диалога и значение, возвращаемое из контроллера диалога.В вашем родительском контроллере объект, переданный обратно в ваш closePromise обратный вызов, имеет свойства id и value.Вам нужно будет получить все, что вы передаете через свойство value (т.е. data.value.whateverYouAreReturning).Вот простой пример, который возвращает объект с единственным строковым свойством. 

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>
0 голосов
/ 24 сентября 2018

Это может работать (не может проверить это, если вы не можете поделиться плункером):

.controller ('configManagementCtrl', ['$ scope', 'deConfigService', 'ngDialog', '$ state',' messagesService ', функция ($ scope, deConfigService, ngDialog, $ state, messagesService) {

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