AngularJS: 如何在新窗口中打开页面,同时保留作用域、控制器和服务

阅读时长 6 分钟读完

当我们需要在 AngularJS 中打开一个新的浏览器窗口时,我们通常会使用 JavaScript 的 window.open() 方法。但是,使用这个方法打开的页面将无法访问原始页面的作用域、控制器或服务。如果你正在寻找如何在 AngularJS 中打开一个新的浏览器窗口,并且想要保留当前页面的作用域、控制器和服务,则本文将为您提供解决方案。

解决方案

为了在新窗口中打开一个页面并保留作用域、控制器和服务,我们可以使用 window.open() 方法以及 $rootScope.$new()$controller() 方法。

在原始页面中我们需要做以下操作:

  1. 创建一个名为 ChildWindowController 的控制器。
  2. 在该控制器中,创建一个名为 childRootScope 的作用域,它是通过 $rootScope.$new() 方法创建的。
  3. 通过 $controller() 方法创建一个名为 ChildController 的子控制器,并将其绑定到 childRootScope 上。
  4. ChildWindowController 中,声明一个名为 childWindow 的变量,并将其设置为 window.open() 方法返回的新窗口对象。
  5. childWindow 中加载 Child.html 页面,并将 ChildController 作为该页面的控制器。

下面是示例代码:

-- -------------------- ---- -------
---- ----------- ---
--------- -----
------
------
    ----- ----------------
    ------------- --------------
    ------- ------------------------------------------------------------------------------------
    --------
        ----------------------- ---
            ------------------------------------ -------------- --------- -------------- -------------------- ------- ------------ -
                --- -------------- - ------------------
                ------------------------------ -------- -----------------
                --- ----------- - --------------------------
                ---------------------- - ---------------
            ---
            ------------------------------ ---------- ---------------- -
                -------------- - ------ ---- ----- -------------
            ----
    ---------
-------
----- -------------- ------------------------------------ -- ------
    ---------- -----------
    ------- --------------------------- ----- ---------------
-------
-------
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
    ----- ----------------
    ------------ --------------
    ------- ------------------------------------------------------------------------------------
    --------
        ------------- - ---------- -
            ------------------------------------------ -
                --- ---------- - -------------------------
                ---------------------------------------------------------------------
                --------------------------------------------------------------------
                -------------------------------------------------------------------------------------- -
                    --- ----- - ----------------------------------------------------------
                    --------------------------------------------------
                    ---------------
                ---
            ---
        --
    ---------
-------
----- ------------------------------ -- ------
    --------- -----------
    ------------------
    ---- -----------------
-------
-------

Child.html 页面中,我们需要做以下操作:

  1. <body> 元素中声明一个名为 ChildController 的控制器。
  2. <body> 元素中声明一个空的 <div> 元素,并将其 ID 设置为 "child"
  3. window.onload 事件处理程序中,获取原始页面的作用域并将其分配给 childRootScope
  4. 使用 $compile() 方法编译 child 元素,并将其与 childRootScope 绑定。

结论

现在,当我们单击 Parent.html 页面上的 "

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/30670

纠错
反馈