Несколько приложений окна браузера с использованием 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), идентификатор пользователя и статус отображения. Статус отображения привязан к элементу DOM через ng-show.

Вот результаты поиска 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 соответствующего элемента false, чтобы скрыть ваш результат поиска DOM. Вот эта функция:

$scope.removeSearchResult = function(userIdx) { 
    $scope.winRef[userIdx].show = false; 
}; 

Этот код отлично работает, если вы поместите его в контроллер. Также прочитайте мои комментарии к коду, чтобы отметить несколько вещей, которые я выделил.

Это приблизительное представление о том, как вы должны решить свою проблему. Это может значительно увеличить загрузку html-файла в новое окно и заставить контроллер взаимодействовать с ним через событие onload нового окна. Поиграйте с ним и изучите свои методы.