Question

我在网格中有5行不同的用户名（搜索pae）。当我点击第一个名字时，它将在一个新窗口中打开（用户信息）。就像那样可以打开5个不同的窗口。

在搜索页面中，我有这些窗口的参考。当我将鼠标悬停在搜索屏幕上的引用上时，必须关注特定窗口，当我手动关闭用户信息窗口时，必须删除搜索屏幕中的引用。

请告诉我实施这些概念的解决方案或链接..

Answer 1

这是一个有效的代码。它用于演示目的，展示如何使用多个窗口。而是悬停，它需要您单击搜索链接以创建焦点或将焦点设置到新窗口。它还通过删除相应的搜索结果本身来演示关闭窗口的操作。

我们要做的是在控制器中打开一系列对已打开窗口的引用。您应该使用适当的属性创建DOM搜索结果，并在将其插入文档时填充此数组。

以下是加载搜索结果后数组的外观。

$scope.winRef = [   {id: 'user1', w: 0, show: true}, 
                    {id: 'user2', w: 0, show: true}, 
                    {id: 'user3', w: 0, show: true}];

数组可以记录窗口处理程序（w），用户ID和显示状态。 show status通过ng-show绑定到DOM元素。

以下是DOM搜索结果：

<a href="#" ng-click="openWindow(0)" id="user1" ng-show="winRef[0].show">User1</a> <br>
<a href="#" ng-click="openWindow(1)" id="user1" ng-show="winRef[1].show">User2</a> <br>
<a href="#" ng-click="openWindow(2)" id="user1" ng-show="winRef[2].show">User3</a> <br>

您可以看到，当用户点击链接时，它会调用openWindow()功能。如果已为此用户打开一个窗口，此函数将检查数组。如果是，则打开一个，或者如果没有，则将焦点设置为w。这是您的openWindow功能：

$scope.openWindow = function(userIdx) {

       if ($scope.winRef[userIdx].w === 0) {
          $scope.winRef[userIdx].w = $window.open();


          //Write something in the new page                                                       
          $scope.winRef[userIdx].w.document.write($scope.winRef[userIdx].id);


          //Set the unload event for your new window. 
          $scope.winRef[userIdx].w.onbeforeunload = function() {

               //Note that we create a closure here. Also note the 
               //applicaiton of the $apply here. 
               $scope.$apply($scope.winRef[userIdx].show = false);                           
           };                      
      }            
      else
         $scope.winRef[userIdx].w.focus();
};

最后你可以看到我用一个函数绑定了新窗口的unbeforeunload事件。此函数设置相应元素show的{{1}}属性以隐藏DOM搜索结果。这是功能：

false

如果将它们放在控制器中，此代码可以正常工作。另请阅读我对代码的评论，注意我强调的一些事项。

这是一个如何解决问题的粗略概念。这可以通过将html文件加载到新窗口并使控制器通过新窗口的$scope.removeSearchResult = function(userIdx) { $scope.winRef[userIdx].show = false; };事件与其进行交互来大大扩展。请玩它并学习你的方法。

使用angularjs的多个浏览器窗口应用程序

1 个答案: