我在一个网格中有 5 行不同的用户名（搜索 pae）。 当我单击名字时，它将在新窗口（用户信息）中打开。像这样可以打开5个不同的窗口。
在搜索页面，我有这些窗口的参考。当我将鼠标悬停在搜索屏幕上的引用上时，必须聚焦特定窗口，而当我手动关闭用户信息窗口时，必须从搜索屏幕上删除此引用。
请告诉我实现这个概念的解决方案或链接..
【问题讨论】：
这是一个工作代码。这是为了演示目的，展示如何使用多个窗口。而不是悬停，它需要您单击搜索链接来创建或将焦点设置到新窗口。它还通过删除相应的搜索结果本身来演示关闭窗口的动作。
我们要做的是在我们的控制器中拥有一个对打开的窗口的引用数组。您应该使用适当的属性创建 DOM 搜索结果，并在将它们插入文档时填充此数组。
这是加载搜索结果后数组的样子。
$scope.winRef = [ {id: 'user1', w: 0, show: true},
{id: 'user2', w: 0, show: true},
{id: 'user3', w: 0, show: true}];
该数组可以记录窗口处理程序（w）、用户ID和显示状态。显示状态通过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事件。此函数设置适当元素false 的show 属性以隐藏您的DOM 搜索结果。这是函数：
$scope.removeSearchResult = function(userIdx) {
$scope.winRef[userIdx].show = false;
};
如果您将它们放在控制器中，此代码将完美运行。还请阅读我的代码中的 cmets，以注意我突出显示的几件事。
这是您应该如何解决问题的粗略想法。这可以通过将 html 文件加载到新窗口并通过新窗口的onload 事件使控制器与之交互来大大扩展。请玩它并学习你的方法。
【讨论】：