无法将数据从弹出模态传递到父页面

Question

I have created a popup modal in angularjs. 我已经在angularjs中创建了一个弹出模式。 In the popup there are input fields which should form table by the input values. 在弹出窗口中，有一些输入字段，这些字段应由输入值组成表格。 There are two HTML pages. 有两个HTML页面。 First Html page is a parent page which contains a button that redirects to popup page Second html page is the popup containing one text field Entering value in that text field should form rows with two input fields Upon taking input from formed input fields and clicking ok. 第一个HTML页面是一个父页面，其中包含一个重定向到弹出页面的按钮，第二个html页面是一个包含一个文本字段的弹出窗口，在该文本字段中输入值应形成具有两个输入字段的行，然后从形成的输入字段中获取输入并单击“确定”。 Popup should close and table should be formed in the parent page. 弹出窗口应关闭，并在父页面中形成表格。 Below is the plnkr to get a detailed idea. 以下是获取详细想法的plnkr。

https://next.plnkr.co/edit/z2E9sE 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>

Answer 1

There's a couple of things happening here. 这里发生了几件事。 First: you're not returning anything in your gen function, or passing an index when calling it. 首先：您不会在gen函数中返回任何内容，也不会在调用它时传递索引。 Second: be aware that the modal is creating a seperate scope, your makeArray function is declared on the scope of the modal. 其次：请注意，模态正在创建一个单独的作用域，您的makeArray函数在模态的作用域中声明。 Here's an updated plnkr that should put you in the right direction. 这是更新后的plnkr ，可以为您提供正确的方向。

Answer 2

I found the solution for the question above. 我找到了上述问题的解决方案。 The code is posted below. 该代码发布在下面。 Here is the Plunker link. 这是Plunker链接。 http://next.plnkr.co/edit/z2E9sE 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> <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"> <script id="modalContent.html" type="text/ng-template"> <h3> POP UP</h3> <input ng-model="tableCount" type="number" ng-change="makeArray()" /> <table> <tr ng-repeat="t in tables track by $index"> <td> <input ng-model="t.rows" type="number" /> </td> <td> <input ng-model="t.cols" type="number" /></td> </tr> </table> <!-- <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> --> <pre>{{tableArray}}</pre> <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> </script> <div ng-controller="ModalCtrl"> <button class="btn btn-info" ng-click="open()" style="margin: 15px;">Create Shelf</button> <pre>{{tableArray}}</pre> <table ng-repeat="t in tableArray track by $index" border="2"> <tr ng-repeat="r in [] | range:t.rows"> <td ng-repeat="c in [] | range:t.cols">RC</td> </tr> </table> </div> </body> </html>

无法将数据从弹出模态传递到父页面

问题描述

2 个解决方案

解决方案1
0 2019-07-03 06:58:58

解决方案2
0 已采纳 2019-07-04 08:53:16

无法将数据从弹出模态传递到父页面

问题描述

2 个解决方案

解决方案1 0 2019-07-03 06:58:58

解决方案2 0 已采纳 2019-07-04 08:53:16

解决方案1
0 2019-07-03 06:58:58

解决方案2
0 已采纳 2019-07-04 08:53:16