Невозможно передать данные из всплывающего модального на родительскую страницу - PullRequest
0 голосов
/ 03 июля 2019

Я создал модальное всплывающее окно в angularjs.Во всплывающем окне есть поля ввода, которые должны формировать таблицу по значениям ввода.Есть две HTML-страницы.Первая HTML-страница - это родительская страница, содержащая кнопку, которая перенаправляет на всплывающую страницу. Вторая HTML-страница - это всплывающее окно, содержащее одно текстовое поле. Ввод значения в этом текстовом поле должен образовывать строки с двумя полями ввода. После ввода данных из сформированных полей ввода и нажатия кнопки «ОК».Всплывающее окно должно закрыться, и таблица должна быть сформирована на родительской странице.Ниже приводится подробное описание plnkr.

https://next.plnkr.co/edit/z2E9sE

var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('ModalCtrl', function($scope, $uibModal) {
  $scope.open = function() {
    var modalInstance = $uibModal.open({
      templateUrl: 'modalContent.html',
      controller: function($scope, $uibModalInstance) {
        debugger;
        $scope.table = 0;
   $scope.cols = [];
   $scope.rows = [];

   $scope.makeArray = function() {
      if ($scope.table) {
        return new Array(parseInt($scope.table));
      } else {
        return new Array(0);
      }
   }

   $scope.gen=function($index)
   {
     $scope.getColsCount($index);
     $scope.getRowsCount($index);
    
   };
     $scope.getRowsCount = function ($index) {
      if ($scope.rows[$index]) {
         return new Array(parseInt($scope.rows[$index]));
      } else {
         return new Array(0);
      }
   }

   $scope.getColsCount = function ($index) {
      if ($scope.cols[$index]) {
        return new Array(parseInt($scope.cols[$index]));
      } else {
        return new Array(0);
      }
    }
        $scope.ok = function() {
          debugger;
          $uibModalInstance.close($scope.gen());
        };
        $scope.cancel = function() {
          $uibModalInstance.dismiss();
        };
      },
    });
    modalInstance.result.then(function(response) {
      $scope.result = `${response} `;
    });
  };
});

<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link data-require="bootstrap-css@3.*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
    <script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script data-require="angular-animate@1.6.*" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
    <script data-require="angular-touch@1.6.*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-touch.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="app.js"></script>
  </head>


  <body ng-app="plunker">
    <div ng-controller="ModalCtrl">
      <button class="btn btn-info" ng-click="open()" style="margin: 15px;">Create Shelf</button>
      
      
       <table ng-repeat="t in makeArray() track by $index">
        <tr ng-repeat="r in getRowsCount($index) track by $index">
          <td ng-repeat="c in getColsCount($parent.$index) track by $index">Col </td>
        </tr>
      </table>
    </div>
  </body>

</html>

<h3> POP UP</h3>
<input ng-model="table" type="number" />
    <table>
      <tr ng-repeat="t in makeArray() track by $index">
        <td> <input ng-model="rows[$index]" type="number" />
        </td>
        <td> <input ng-model="cols[$index]" type="number" /></td>
      </tr>
    </table>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

Я нашел решение вопроса выше.Код размещен ниже.Вот ссылка на Plunker.http://next.plnkr.co/edit/z2E9sE

var app = angular.module('plunker', ['ui.bootstrap']);
app.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);
app.controller('ModalCtrl', function ($rootScope, $scope, $uibModal) {
    $rootScope.tableArray = [];
    $rootScope.getRowsCountData = [];
    $rootScope.getColsCountData = [];
    $scope.open = function () {
        var modalInstance = $uibModal.open({
            templateUrl: 'modalContent.html',
            controller: function ($scope, $uibModalInstance) {
                $scope.tableCount = 0;
                $scope.tables = [];
                $scope.cols = [];
                $scope.rows = [];
                $rootScope.tableArray = [];
                $rootScope.getRowsCountData = [];
                $rootScope.getColsCountData = [];
                $scope.makeArray = function () {
                    if ($scope.tableCount) {
                        for (let i = 0; i < $scope.tableCount; i++)
                        {
                            let obj = { rows: 0, cols: 0 };
                            $scope.tables.push(obj);
                        }
                    }
                }
                $scope.ok = function () {
                     $rootScope.tableArray = $scope.tables;
                    
                    $uibModalInstance.close();
                };
                $scope.cancel = function () {
                    $uibModalInstance.dismiss();
                };
            },
        });
    };
});
app.filter('range', function () {
    return function (input, total) {
        total = parseInt(total);

        for (var i = 0; i < total; i++) {
            input.push(i);
        }

        return input;
    };
});
<!DOCTYPE html>



    
    
    
    
    
    
    




    
         POP UP
        
    
        
            
                
                    
                
 
            
        
           <!-- <table ng-repeat="t in makeArray() track by $index">
          
            Col 
          
         -->
        {{tableArray}}
ОК Отмена Создать полку
{{tableArray}}
RC
0 голосов
/ 03 июля 2019

Здесь происходит пара вещей. Во-первых: вы ничего не возвращаете в своей функции gen или не передаете индекс при вызове. Во-вторых: имейте в виду, что модал создает отдельную область видимости, ваша функция makeArray объявлена ​​в области видимости модала. Вот обновленный plnkr , который должен направить вас в правильном направлении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...