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

【问题标题】：Controlling parent scope variables from child state in ui.router [duplicate]从 ui.router 中的子状态控制父范围变量 [重复]
【发布时间】：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 的组件被渲染时，它取决于路由（状态）。 header 和 footer 在抽象父 root 状态中定义，因此我不需要在子状态中重复它们。子状态仅为父 root 状态 (index.html) 定义 content。

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

我正在使用angularjs 和ui.router。 ui.router 是否为单状态新上下文中的每个视图定义？

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

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

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

【讨论】：

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