AngularJS: ouvrez une nouvelle fenêtre de navigateur, tout en conservant la portée et 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 service $window.open. Mais dans la nouvelle fenêtre, toutes les variables $scope 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, contrôleurs ou étendues d'application ne sont pas en vigueur du tout, est-ce vrai? Y at-il un moyen d'ouvrir une nouvelle fenêtre de navigateur encore fait encore la nouvelle fenêtre appartient à la même application angulaire dans l'ancienne fenêtre? J'ai besoin d'avoir l'accès à certains services angularJS et la portée du contrôleur qui ouvrent cette nouvelle fenêtre. Est-ce possible?
3 réponses
Il n'y a pas de moyen [simple] de faire en sorte que la nouvelle fenêtre appartienne au même angle.application js, puisque l'application angulaire est généralement liée au document, à la fenêtre et aux événements de la fenêtre où elle a été initialisée soit via une directive ng-app, soit en appelant angular.bootstrap.
Cependant, vous pouvez créer un nouveau module angulaire et une nouvelle application pour votre fenêtre contextuelle. Vous pouvez utiliser les mêmes services de base et contrôleurs de votre application d'origine en incluant fichiers javascript appropriés.
En supposant que votre fenêtre contextuelle a besoin de données de l'application d'origine, vous pouvez le transmettre en utilisant l'objet window renvoyé par la fenêtre.la méthode open (). Par exemple, dans votre première application angulaire, 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 application angulaire "popup" secondaire est initialisée, elle peut alors référencer les données partagées en lisant la fenêtre.mySharedData.
Vous pouvez également créer des fonctions dans chaque fenêtre être appelée à partir de l'autre fenêtre. La fenêtre contextuelle peut rappeler dans la fenêtre d'origine en utilisant la fenêtre.ouvreur de propriété. (fenêtre.parent fait référence à la fenêtre parent des cadres, vous voulez fenêtre.ouvre)
[D'accord, je suis sûr que si vous étudiez le code source angulaire, vous pourriez trouver un moyen astucieux d'utiliser la même application angulaire pour les deux fenêtres. Une telle tentative dépasse mes ambitions ce soir.]
Une fenêtre qui est ouverte par votre fenêtre principale sera architecturalement incapable de partager la même portée racine avec son parent. Parce que la portée angulaire est définie par élément DOM. Vous devez démarrer 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 du parent Fenêtre, puis communiquer un événement à travers la portée de la fenêtre enfant à partir du parent. Quelque chose comme ceci:
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 prenez L'élément DOM (dans la fenêtre enfant) sur lequel l'attributng-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"});
Vous pouvez passer des données en utilisant l'objet window:
Syntaxe:
$window.open('<linkname>').<variableName> = "your data";
Exemple :
$window.open('<linkname>').var1 = "value1";
(Note: - celui-ci ouvrira un nouveau lien et définira des données variables)
Dans le nouveau contrôleur de page, vous pouvez accéder à la variable en utilisant
oldata = window.var1;