如何从弹出的AngularJS交换价值的父窗口 [英] How to exchange a value from pop-up to parent window in AngularJS
本文介绍了如何从弹出的AngularJS交换价值的父窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一种情况，我需要动态（交换数据的从父到子和逆转（的父到子的））。我从几个环节简称，它帮助我从父到子，传递数据。然而从子到父没有
下面我父母的来源$ C $ C到儿童（HTML以及控制器）。可能有人帮助我如何再回来取数据。
Parent.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=parentWindowApp＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;父窗口＆LT; /标题＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE =边缘＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1.0＆GT;
＆LT; META NAME =说明内容=＆GT;
＆LT; META NAME =作者内容=＆GT;
＆LT;脚本SRC =JS / lib目录/角1.3.0 / angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / lib目录/控制器/ parentWindowController.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接HREF =JS / lib目录/引导/ CSS / bootstrap.css的rel =stylesheet属性＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=parentWindowController＆GT; ＆LT; DIV CLASS =容器＆GT; ＆LT; BR＆GT;＆LT; BR＆GT;＆LT; BR＆GT;
＆LT;输入类型=文本NG模型=iptext.text占位符=I / P值放大器;放大器;点击链接/＆GT;
＆下;一个ID =popupSymImg的tabindex = - 1纳克点击=openChildWindow（）;＆GT;呼儿窗LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
parentWindowController.js
VAR parentWindow = angular.module（'parentWindowApp'，[]）;parentWindow.controller（'parentWindowController'，函数（$范围，$窗口）{ //$scope.shareData =父窗口的父值; 警报（'控制器加载中...'）; $ scope.iptext = {文字：''}; $ scope.openChildWindow =功能（）{ //$window.childWindowValue = angular.toJson（值）;
$ window.childWindowValue = angular.toJson（$ scope.iptext）;
警报（开放之前：+ $ window.childWindowValue）; $ window.open（'ChildWindow.html'，300,200）; //警报（打开后：+ $ window.childWindowValue）; }; }）;
ChildWindow.html
＆LT;！DOCTYPE HTML＆GT; ＆LT; HTML NG-应用=childWindowApp＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆gt;儿童窗LT; /标题＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT;
＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE =边缘＆GT;
＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1.0＆GT;
＆LT; META NAME =说明内容=＆GT;
＆LT; META NAME =作者内容=＆GT;
＆所述; SCRIPT SRC =$ {pageContext.request.contextPath} /js/lib/angular-1.3.0/angular.js＆GT;＆下; /脚本＆GT;
＆LT;脚本src=\"${pageContext.request.contextPath}/js/lib/controllers/childWindowController.js\"></script>
＆LT;链接HREF =$ {} pageContext.request.contextPath /js/lib/bootstrap/css/bootstrap.css的rel =stylesheet属性＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=childWindowController＆GT; ＆LT; DIV CLASS =容器＆GT; ＆LT;表＆gt;
＆LT; TR NG重复='shareData在shareDatas'＆GT;
＆所述; TD＆GT;
＆LT;输入NG-模式='shareData.title级=表格控大小=10MAXLENGTH =10占位符=项目名称
需要＆GT;
＆下;一个ID =popupSymImg的tabindex = - 1纳克点击=closeChildWindow（shareData.title）;＆GT;关闭子窗口＆LT; / A＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; /身体GT; ＆LT; / HTML＆GT;
childWindowController.js
VAR childWindow = angular.module（'childWindowApp'，[]）;
childWindow.controller（'childWindowController'，函数（$范围，$窗口）{ //$scope.shareData =父窗口的父值; 警报（从父项值：+ angular.toJson（$ window.opener.childWindowValue））; $ scope.parentValue = $ window.opener.childWindowValue; $ scope.shareDatas = [
{标题：项目1}，
{标题：项目2}，
{标题：项目3}，
{标题：第4项}，
{标题：第5项}，
{标题：第6项}，
{标题：项目7'}
]; $ scope.closeChildWindow =功能（值）{
//警报（在开瓶器::'+ $ window.opener.childWindowValue）; //警报（子窗口::'+ $ scope.parentValue）; 警报（+价值上点击::值'）; $ window.childWindowValue =价值; 警报（'在当前窗口属性：'+ $ window.childWindowValue）; // $ window.close（）的; };
}）;
屏幕截图
解决方案
我已经用在showModalDialog交换父母与子女之间的数据，它是工作的罚款
。
itwebtutorials.net/JavaScript/JS07/jsdhtml07-05.php - 此链接提供了有关在showModalDialog的解释
I have a scenario where I need to exchange the data dynamically (From PARENT To CHILD and Reversal (PARENT to CHILD) ). I referred from couple of links and it helped me to pass the data from PARENT to CHILD, however From CHILD to PARENT didn't.
Below i have the source code of Parent to Child (Html as well as the controller). Could somebody help me how to take the data back again.
Parent.html
<!DOCTYPE html>
<html ng-app="parentWindowApp">
<head>
<title>Parent Window</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="js/lib/angular-1.3.0/angular.js"></script>
<script src="js/lib/controllers/parentWindowController.js"></script>
<link href="js/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-controller="parentWindowController">
<div class="container">
<br><br><br>
<input type="text" ng-model="iptext.text" placeholder="I/P Value & Click Link"/>
<a id="popupSymImg" tabindex="-1" ng-click="openChildWindow();"> Call Child Window </a>
</div>
</body>
</html>
parentWindowController.js
var parentWindow = angular.module('parentWindowApp',[]);
parentWindow.controller('parentWindowController', function ($scope,$window) {
//$scope.shareData = "Parent Value from Parent Window";
alert('Controller Loaded...');
$scope.iptext = { text: ''};
$scope.openChildWindow = function(){
//$window.childWindowValue = angular.toJson(value);
$window.childWindowValue = angular.toJson($scope.iptext);
alert("Before Open : "+$window.childWindowValue);
$window.open('ChildWindow.html', 300,200);
//alert("After Open : "+$window.childWindowValue);
};
});
ChildWindow.html
<!DOCTYPE html> <html ng-app="childWindowApp">
<head>
<title>Child Window</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="${pageContext.request.contextPath}/js/lib/angular-1.3.0/angular.js"></script>
<script src="${pageContext.request.contextPath}/js/lib/controllers/childWindowController.js"></script>
<link href="${pageContext.request.contextPath}/js/lib/bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-controller="childWindowController">
<div class="container">
<table>
<tr ng-repeat='shareData in shareDatas'>
<td >
<input ng-model='shareData.title' class="form-control" size="10" maxlength="10" placeholder="Item Name"
required>
<a id="popupSymImg" tabindex="-1" ng-click="closeChildWindow(shareData.title);"> Close Child Window </a>
</td>
</tr>
</table>
</div>
</body> </html>
childWindowController.js
var childWindow = angular.module('childWindowApp',[]);
childWindow.controller('childWindowController', function ($scope,$window) {
//$scope.shareData = "Parent Value from Parent Window";
alert("Value from parent :"+angular.toJson($window.opener.childWindowValue));
$scope.parentValue = $window.opener.childWindowValue;
$scope.shareDatas = [
{title: 'Item 1'},
{title: 'Item 2'},
{title: 'Item 3'},
{title: 'Item 4'},
{title: 'Item 5'},
{title: 'Item 6'},
{title: 'Item 7'}
];
$scope.closeChildWindow = function(value){
//alert('In Opener :: '+$window.opener.childWindowValue);
//alert('Child Window :: '+$scope.parentValue);
alert('Value on Click :: '+value);
$window.childWindowValue = value;
alert('Current in Window Properties : '+$window.childWindowValue);
//$window.close();
};
});
Screenshot
解决方案
I have used showModalDialog to exchange the data between Parent and Child and it is working fine.
itwebtutorials.net/JavaScript/JS07/jsdhtml07-05.php – This link gives the explanation on showModalDialog
这篇关于如何从弹出的AngularJS交换价值的父窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
