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

当我们需要在 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

阅读全文

猜你喜欢

  • 如何用注释文档化 JavaScript 文件？

    在开发 JavaScript 应用程序时，我们需要让代码易于阅读和理解。除了编写干净和有逻辑的代码外，注释是一种简单而有效的方法来提高代码的可读性和可维护性。 注释的类型 JavaScript 支持两...

    6 年前
  • JavaScript touchend versus click dilemma

    在前端开发中，我们常常需要考虑用户使用不同的设备和输入方式。其中一个常见问题是如何处理移动设备上的触摸事件和鼠标点击事件。 touchend 事件是指手指离开屏幕，触发此事件。

    6 年前
  • HTML5 Drag and Drop - No transparency?

    HTML5拖放是一项非常有用的功能，可以使用户轻松地拖动元素并将其放置在页面上。但是，在某些情况下，您可能希望在拖放操作期间不使用透明度效果。本文将探讨如何在HTML5拖放过程中禁用该效果。

    6 年前
  • Headless node.js javascript browser with screenshot capability?

    在现代的前端开发中，我们经常需要进行自动化测试和网页截图等操作。为了方便这些操作的实现，我们可以使用一个 headless 的浏览器来模拟用户行为并截取页面。 本文将介绍如何使用 Node.js 和 ...

    6 年前
  • DOM: 为什么这是内存泄漏？

    在前端开发中，DOM（文档对象模型）是我们常常使用的一个重要概念。然而，如果不合理地使用DOM，很容易导致内存泄漏问题。 什么是内存泄漏？ 内存泄漏指的是程序中已经不再需要的内存没有得到释放，导致系统...

    6 年前
  • 如何进行跨域请求

    在前端开发中，我们经常需要从不同的域名或端口上获取数据，这就涉及到了跨域请求。但是由于浏览器的同源策略限制，直接跨域请求会受到阻碍。本文将介绍如何通过几种方法来解决跨域请求的问题。

    6 年前
  • JavaScript 数组在物理内存中的表示原理

    JavaScript 中的数组是一种非常有用的数据结构，它可以存储一系列有序的值。但是，当我们使用数组时，我们可能并不了解它们在物理内存中的实际表示原理。本文将深入探讨 JavaScript 数组在物...

    6 年前
  • 如何使用react-redux中的connect连接mapStateToProps、MapDispatchToProps和redux-router

    React-Redux是一个流行的前端库，它能够方便地将我们的React组件与Redux状态管理库结合起来。Connect是React-Redux库中最重要的部分之一，它允许我们将Redux存储中的数...

    6 年前
  • Angular2事件的Typescript类型是什么？

    在开发Angular2应用程序时，我们必须处理各种事件。了解如何正确定义事件类型非常重要，因为它将帮助我们在编码期间发现潜在的错误，并使我们的代码更具可读性和可维护性。

    6 年前
  • 在IE中如何将网站翻转（愚人节特别版）

    愚人节快乐！作为一名前端开发者，你是否想过让你的网站在这个特殊的日子里与众不同？那么今天我们来学习一下如何在IE浏览器中将网站翻转。 为什么只在IE中？ 因为其他现代化浏览器并不支持此功能。

    6 年前
  • 如何判断 `window` 的 "load" 事件是否已经触发

    简介 在前端开发中，经常会使用 window 对象上的 "load" 事件来执行一些需要页面完全加载后才能运行的任务。但是，在某些情况下，我们可能需要知道这个事件是否已经被触发过了。

    6 年前
  • 如何在一个 Node.js 脚本中运行另一个 Node.js 脚本

    在前端开发中，我们通常需要使用 Node.js 运行 JavaScript 代码。有时，我们希望在一个 Node.js 脚本中运行另一个脚本来完成某些任务。 方法一：使用 child_process ...

    6 年前
  • Angular-ui Router同时激活两个状态

    在使用AngularJS中的ui-router时，有时候需要同时激活两个状态（state）来实现复杂的路由结构。本文将介绍如何实现同时激活两个状态，并提供示例代码。

    6 年前
  • 使用 AJAX 登录时如何让 Chrome 提示保存密码

    在前端开发中，使用 AJAX 发送异步请求进行登录是很常见的一种方式。但是，在这种情况下，浏览器通常不会提示用户保存登录密码，这可能会影响用户体验和安全性。 本文将介绍如何通过修改 AJAX 请求的响...

    6 年前
  • ES6 箭头函数中的 "this" 指向问题

    在 ES6 中，引入了箭头函数（Arrow Function），这种语法糖使得我们能够更加简洁地编写函数。然而，在使用箭头函数时，我们有可能会遇到 "this" 无法指向预期对象的问题。

    6 年前
  • 如何在Javascript中创建自定义事件类？

    为了更好地实现事件驱动编程，Javascript提供了许多内置的事件类型。但是，在某些情况下，这些内置事件可能无法满足我们的需求。这时候，我们需要创建自己的自定义事件类。

    6 年前
  • 如何判断一个 ES6 Promise 是否已经被完成/拒绝/解决？

    介绍 ES6 Promise 是一种用于异步编程的非常强大而且流行的工具。当你在使用 Promise 时，有时候你会想知道一个 Promise 的状态是否已经被完成、拒绝或者解决。

    6 年前
  • Javascript能否在Firefox、Safari和Chrome中读取剪贴板？

    剪贴板是计算机用户日常使用频率很高的功能之一，它可以让我们快速复制和粘贴文本、图片等内容。但是，在Web浏览器中，为了保护用户隐私和安全，剪贴板通常被禁止在JavaScript代码中直接访问。

    6 年前
  • Node.js 内存溢出问题的深入探讨

    在开发 Node.js 应用程序时，我们可能会遇到内存溢出的问题。当应用程序需要大量内存时，它可能会耗尽可用内存并崩溃。这种情况通常会导致应用程序无法处理请求或响应，并且可能会增加系统资源消耗和延迟。

    6 年前
  • Jquery Success函数在使用JSONP时不触发

    当使用jQuery进行跨域请求时，通常会使用JSONP技术。然而，在使用JSONP时，您可能会遇到success回调函数未被触发的情况。这篇文章将探讨出现此问题的原因，并提供解决方案。

    6 年前

相关推荐

    暂无文章