AngularJS: abra uma nova janela do navegador, mas ainda retenha o escopo e o controlador e os serviços

Estou escrevendo um aplicativo angularJS. Neste controlador em particular, abro uma nova janela do navegador através do serviço $window.open . Mas na nova janela, todas as variables $scope são perdidas.

Eu tentei usar window.parent mas isso não funciona. Na verdade, na nova janela do navegador, todos os serviços de aplicativos, controladores ou escopos não estão em vigor, isso é verdade? Existe uma maneira de abrir uma nova janela do navegador e ainda faz a nova janela pertencer ao mesmo aplicativo angular na janela antiga? Eu preciso ter access a alguns serviços angularJS e ao escopo do controlador que abre essa nova janela. Isso é possível em tudo?

Não existe uma maneira [direta] de fazer com que a nova janela pertença ao mesmo aplicativo angular.js, uma vez que o aplicativo angular é geralmente vinculado ao documento, janela e events da janela onde foi inicializado por meio de uma diretiva ng-app. ou chamando angular.bootstrap.

No entanto, você pode criar um novo módulo e aplicativo angular para sua janela pop-up. Você pode usar os mesmos serviços básicos e controladores do seu aplicativo original, incluindo os arquivos javascript apropriados.

Supondo que sua janela pop-up precise de dados do aplicativo original, você pode transmiti-la usando o object window retornado pelo método window.open (). Por exemplo, dentro do seu primeiro aplicativo angular, abra sua janela popup assim:

 angular.module('originalModule').service('popupService', function(someOtherDataService) { var popupWindow = window.open('popupWindow.html'); popupWindow.mySharedData = someOtherDataService.importantData; }); 

Depois que seu aplicativo angular “pop-up” secundário for inicializado, ele poderá referenciar os dados compartilhados lendo window.mySharedData.

Você também pode criar funções em cada janela que pode ser chamada da outra janela. A janela pop-up pode retornar à janela original usando a propriedade window.opener. (window.parent refere-se à janela pai de frames, você quer window.opener)

[De acordo, tenho certeza de que, se você estudasse o código-fonte angular, poderia encontrar uma maneira inteligente de usar o mesmo aplicativo angular para as duas janelas. Essa tentativa está além da minha ambição esta noite.]

Uma janela que é aberta pela sua janela principal será arquitetonicamente incapaz de compartilhar o mesmo escopo raiz com seu pai. Porque o escopo angular é definido por elemento DOM. Você precisa inicializar um aplicativo AngularJs completamente novo na janela filho.

Desde que uma nova janela (filho), que hospeda outro aplicativo AngularJs, tenha sido gerada pela janela principal (pai), uma solução a seguir pode ser viável: referenciando o escopo raiz da janela recém-gerada da janela pai e comunicando um evento através do escopo da janela filho do pai. Algo assim:

Na janela filho :

 $rootScope.$on("INTER_WINDOW_DATA_TRANSFER", function (data, args) { console.log("DATA RECEIVED: " + args.someData); }); 

Na janela pai, você pega o elemento DOM (na janela filho) no qual o atributo ng-app é definido (seu escopo raiz) (pseudocódigo):

 var newWindowRef = $window.open("", "New Window", "width=1280,height=890,resizable=1"); var newWindowRootScope = newWindowRef.angular.element("#MY_ROOT_APP_ELEMENT_ID").scope(); newWindowRootScope.$broadcast("INTER_WINDOW_DATA_TRANSFER", {someData : "I'm data"}); 

Você pode passar dados usando o object window:

Sintaxe:

 $window.open(''). = "your data"; 

Exemplo:

 $window.open('').var1 = "value1"; 

(Nota: – Este irá abrir um novo link e definir dados variables) No novo controlador de página você pode acessar a variável usando oldata = window.var1;