如何在AngularJS中将弹出窗口中的值交换为父窗口

时间:2014-07-09 16:51:47

标签: angularjs angularjs-scope

我有一个场景需要动态交换数据(从父母到孩子逆转 父母到孩子 ))。我引用了几个链接,它帮助我将数据从PARENT传递给CHILD,然而从CHILD到PARENT没有

下面我有Parent to Child的源代码(Html以及控制器)。有人可以帮我解决如何重新获取数据的问题。

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 &AMP; 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();

   };  


 });

截图

enter image description here

1 个答案:

答案 0 :(得分:1)

我使用showModalDialog在Parent和Child之间交换数据,它运行正常。

另见showModalDialog tutorial