javascript - AngularJS: abre una nueva ventana del navegador, pero aún conserva el alcance, el controlador y los servicios

ng-href angularjs

Question

Estoy escribiendo una aplicación angularJS. En este controlador en particular, abro una nueva ventana del navegador a través del servicio $window.open . Pero en la nueva ventana, todas las variables $scope se pierden.

Intenté usar window.parent pero esto no funciona. De hecho, en la nueva ventana del navegador, todos los servicios de aplicaciones, controladores o ámbitos no están en efecto, ¿es cierto? ¿Hay alguna forma de abrir una nueva ventana del navegador y aún así la nueva ventana pertenece a la misma aplicación angular en la ventana anterior? Necesito tener acceso a algunos servicios de angularJS y al alcance del controlador que abre esa nueva ventana. ¿Es esto posible en absoluto?

Answer 1

No hay una forma [directa] de hacer que la nueva ventana pertenezca a la misma aplicación angular.js, ya que la aplicación angular generalmente está vinculada al documento, la ventana y los eventos de la ventana donde se inicializó mediante una directiva ng-app o llamando a angular.bootstrap.

Sin embargo, puede crear un nuevo módulo angular y una nueva aplicación para su ventana emergente. Puede usar los mismos servicios y controladores básicos de su aplicación original incluyendo los archivos de JavaScript apropiados.

Suponiendo que su ventana emergente necesita datos de la aplicación original, puede pasar eso utilizando el objeto de ventana devuelto por el método window.open (). Por ejemplo, dentro de su primera aplicación angular, abra su ventana emergente de la siguiente manera:

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

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

});

Una vez que se inicializa la aplicación angular secundaria "emergente", puede hacer referencia a los datos compartidos leyendo window.mySharedData.

También puede crear funciones en cada ventana que se pueden llamar desde la otra ventana. La ventana emergente puede volver a llamar a la ventana original utilizando la propiedad window.opener. (window.parent se refiere a la ventana primaria de marcos, desea window.opener)

[De acuerdo, estoy seguro de que si estudiaste el código fuente angular, podrías encontrar alguna forma inteligente de usar la misma aplicación angular para ambas ventanas. Tal intento está más allá de mi ambición esta noche.]

Answer 2

Puede pasar datos utilizando el objeto de ventana:

Sintaxis:

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

Ejemplo:

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

(Nota: - Este abrirá un nuevo enlace y establecerá datos variables) En el nuevo controlador de página puede acceder a la variable usando oldata = window.var1;

Answer 3

Una ventana abierta por su ventana principal será arquitectónicamente incapaz de compartir el mismo ámbito raíz con su padre. Porque el alcance angular está definido por elemento DOM. Debe iniciar una aplicación AngularJs completamente nueva en la ventana secundaria.

Siempre que la ventana principal (primaria) haya generado una nueva ventana (secundaria), que aloja otra aplicación de AngularJs, puede ser viable la siguiente solución: hacer referencia al alcance raíz de la ventana recién creada desde la ventana principal y luego comunicar un evento a través del alcance de la ventana secundaria desde el padre. Algo como esto:

En la ventana secundaria :

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

Desde la ventana principal , toma el elemento DOM (en la ventana secundaria) en el que está definido el atributo ng-app (es el ámbito raíz) (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"});