从 ui.router 中的子状态控制父范围变量 [重复]

Posted

技术标签:

【中文标题】从 ui.router 中的子状态控制父范围变量 [重复]【英文标题】:Controlling parent scope variables from child state in ui.router [duplicate] 【发布时间】:2019-09-29 08:53:45 【问题描述】:

我只是想问一下在一种状态下嵌套视图以及如何在这些视图之间共享一些上下文。

我只有这样的 index.html

<body ng-app="app">
  <div ui-view="header"></div>
  <div ui-view="content"></div>
  <div ui-view="footer"></div>
</body>

我有一个在 ui-view 中呈现的 header.html,名为 header,如下所示:

<h1>title</h1>

这是一个非常简单的模板,但它显示了我遇到的问题。 当ui-view 名为content 的组件被渲染时,它取决于路由(状态)。 headerfooter 在抽象父 root 状态中定义,因此我不需要在子状态中重复它们。子状态仅为父 root 状态 (index.html) 定义 content

例如,如何从子状态控制header.html 中的title 范围变量,以便我可以根据状态在此header 视图中轻松切换title。我在互联网上看到的每个示例都假设有没有任何变量的静态页眉和页脚模板。

我正在使用angularjsui.routerui.router 是否为单状态新上下文中的每个视图定义?

【问题讨论】:

【参考方案1】:

您正在寻找的是services。它们基本上是在控制器之外保存应用程序状态的对象(例如,您可以使用它们在两个控制器之间共享数据)。

还有一个您可以使用的 $rootScope 对象(每个注入它的控制器都可以使用它的单个作用域),但我建议您使用这种方法,而不是第一种方法(尤其是出于未来维护的原因 - 如果您想要的话要升级到 Angular,它没有 rootScope)。

【讨论】:

$rootScope exists, but it can be used for evil。

以上是关于从 ui.router 中的子状态控制父范围变量 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何使用从 React 中的子组件获取的数据更新父组件中的状态

在 React 中访问父组件中的子状态值

linux系统编程:进程控制(fork)

AngularJS ui-router

从Angular 2中的子组件更新父组件属性

js页面的父窗口如何控制关闭window.showModalDialog弹出的子窗口