web-dev-qa-db-fra.com

AngularJS: ouvrez une nouvelle fenêtre de navigateur, tout en conservant la portée, le contrôleur et les services

J'écris une application angularJS. Dans ce contrôleur particulier, j'ouvre une nouvelle fenêtre de navigateur via le $window.open un service. Mais dans la nouvelle fenêtre, tous les $scope les variables sont perdues.

J'ai essayé d'utiliser window.parent mais cela ne fonctionne pas. En fait, dans la nouvelle fenêtre du navigateur, tous les services d'application, contrôleurs ou étendues ne sont pas du tout en vigueur, est-ce vrai? Existe-t-il un moyen d'ouvrir une nouvelle fenêtre de navigateur tout en faisant en sorte que la nouvelle fenêtre appartient à la même application angular dans l'ancienne fenêtre? J'ai besoin d'avoir accès à certains services angularJS et à la portée de la contrôleur qui ouvre cette nouvelle fenêtre. Est-ce possible?

javascriptangularjsangularjs-scopeangularjs-serviceangularjs-controller
28
phamductri

Il n'existe aucun moyen [simple] d'appartenir à la même application angular.js, car l'application angular est généralement liée au document, à la fenêtre et aux événements de la fenêtre où elle se trouve) a été initialisé via une directive ng-app ou en appelant angular.bootstrap.

Cependant, vous pouvez créer un nouveau module angular et application pour votre fenêtre contextuelle. Vous pouvez utiliser les mêmes services et contrôleurs de base de votre application d'origine en incluant les fichiers javascript appropriés.

En supposant que votre fenêtre contextuelle nécessite des données de l'application d'origine, vous pouvez transmettre cela en utilisant l'objet window renvoyé par la méthode window.open (). Par exemple, dans votre première angular, ouvrez votre fenêtre contextuelle comme suit:

angular.module('originalModule').service('popupService', function(someOtherDataService) {

  var popupWindow = window.open('popupWindow.html');
  popupWindow.mySharedData = someOtherDataService.importantData;

});

Une fois que votre "popup" secondaire angular est initialisée, elle peut alors référencer les données partagées en lisant window.mySharedData.

Vous pouvez également créer des fonctions dans chaque fenêtre qui peuvent être appelées à partir de l'autre fenêtre. La fenêtre contextuelle peut rappeler dans la fenêtre d'origine en utilisant la propriété window.opener. (window.parent fait référence à la fenêtre parent des cadres, vous voulez window.opener)

[D'accord, je suis sûr que si vous avez étudié le code source angular, vous pouvez trouver un moyen intelligent d'utiliser la même application angular pour les deux fenêtres. une tentative dépasse mon ambition ce soir.]

29
Geoff Genz

Une fenêtre qui est ouverte par votre fenêtre principale ne sera pas architecturellement capable de partager la même portée racine avec son parent. Parce que la portée angular est définie par élément DOM. Vous devez bootstrap une toute nouvelle application AngularJs dans la fenêtre enfant).

À condition qu'une nouvelle fenêtre (enfant), qui héberge une autre application AngularJs, ait été générée par la fenêtre principale (parent), une solution suivante peut être viable: référencer la portée racine de la fenêtre nouvellement générée à partir de la fenêtre parent, puis communiquer un événement à travers la portée de la fenêtre enfant du parent. Quelque chose comme ça:

Sur la fenêtre enfant:

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

à partir de la fenêtre parent vous saisissez l'élément DOM (dans la fenêtre enfant) sur lequel l'attribut ng-app est défini (c'est la portée racine) (pseudocode):

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"});
9
Yan Yankowski

Vous pouvez transmettre des données à l'aide d'un objet fenêtre:

Syntaxe:

$window.open('<linkname>').<variableName> = "your data";

Exemple :

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

(Remarque: - Celui-ci ouvrira un nouveau lien et définira des données variables) Dans le nouveau contrôleur de page, vous pouvez accéder aux variables en utilisant oldata = window.var1;

6
Ramesh Babu