使用angularjs的多個瀏覽器窗口應用程序

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和顯示狀態。顯示狀態通過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; 
}; 

如果你把它們放在控制器裏面，這個代碼完美的工作。還請閱讀我對代碼的評論，以指出我突出強調的幾件事情。

這是你應該如何解決你的問題的粗略想法。通過將HTML文件加載到新窗口並使控制器通過新窗口的onload事件與其進行交互，可以大大擴展該功能。請與它一起玩，並瞭解你的方法。