当我们需要在 AngularJS 中打开一个新的浏览器窗口时,我们通常会使用 JavaScript 的 window.open()
方法。但是,使用这个方法打开的页面将无法访问原始页面的作用域、控制器或服务。如果你正在寻找如何在 AngularJS 中打开一个新的浏览器窗口,并且想要保留当前页面的作用域、控制器和服务,则本文将为您提供解决方案。
解决方案
为了在新窗口中打开一个页面并保留作用域、控制器和服务,我们可以使用 window.open()
方法以及 $rootScope.$new()
和 $controller()
方法。
在原始页面中我们需要做以下操作:
- 创建一个名为
ChildWindowController
的控制器。 - 在该控制器中,创建一个名为
childRootScope
的作用域,它是通过$rootScope.$new()
方法创建的。 - 通过
$controller()
方法创建一个名为ChildController
的子控制器,并将其绑定到childRootScope
上。 - 在
ChildWindowController
中,声明一个名为childWindow
的变量,并将其设置为window.open()
方法返回的新窗口对象。 - 在
childWindow
中加载Child.html
页面,并将ChildController
作为该页面的控制器。
下面是示例代码:
-- -------------------- ---- ------- ---- ----------- --- --------- ----- ------ ------ ----- ---------------- ------------- -------------- ------- ------------------------------------------------------------------------------------ -------- ----------------------- --- ------------------------------------ -------------- --------- -------------- -------------------- ------- ------------ - --- -------------- - ------------------ ------------------------------ -------- ----------------- --- ----------- - -------------------------- ---------------------- - --------------- --- ------------------------------ ---------- ---------------- - -------------- - ------ ---- ----- ------------- ---- --------- ------- ----- -------------- ------------------------------------ -- ------ ---------- ----------- ------- --------------------------- ----- --------------- ------- -------
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ----- ---------------- ------------ -------------- ------- ------------------------------------------------------------------------------------ -------- ------------- - ---------- - ------------------------------------------ - --- ---------- - ------------------------- --------------------------------------------------------------------- -------------------------------------------------------------------- -------------------------------------------------------------------------------------- - --- ----- - ---------------------------------------------------------- -------------------------------------------------- --------------- --- --- -- --------- ------- ----- ------------------------------ -- ------ --------- ----------- ------------------ ---- ----------------- ------- -------
在 Child.html
页面中,我们需要做以下操作:
- 在
<body>
元素中声明一个名为ChildController
的控制器。 - 在
<body>
元素中声明一个空的<div>
元素,并将其 ID 设置为"child"
。 - 在
window.onload
事件处理程序中,获取原始页面的作用域并将其分配给childRootScope
。 - 使用
$compile()
方法编译child
元素,并将其与childRootScope
绑定。
结论
现在,当我们单击 Parent.html
页面上的 "
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/30670