问题标签 [nested-views]

ui-router是 Angular 标准路由器的绝佳替代品；它支持嵌套状态和视图以及多个视图。

不过，我对两者之间的区别感到有些困惑。在我看来，多个视图几乎总是可以被认为和实现为“高阶”组件的嵌套视图。例如，如果我们考虑一个带有侧边栏和内容框的应用程序，我们可以将它们建模为两个“并行”视图，或者将侧边栏作为父视图，将内容窗格作为依赖于所选侧边栏项目的嵌套子视图.

自述文件本身似乎表明该部门并不是很明确：

专业提示：虽然多个并行视图是一项强大的功能，但您通常可以通过嵌套视图并将这些视图与嵌套状态配对来更有效地管理界面。

何时应该使用多个视图以及何时使用嵌套视图？是否有一些标准可以帮助您在大多数情况下选择哪种是建模状态的正确方法，嵌套与多重？

我正在使用 ui-router 并且我有一个配置，其中我使用了一个父视图，它有一个控制器和子视图，它们也有自己的控制器。每次我导航到其中一个子视图时，父控制器都会再次实例化，因此会对服务器执行不必要的请求。我希望能够在子状态之间导航并重用由父控制器解析的变量。

如何防止每次都实例化父控制器？

这是我的路由配置：

这是 HTML：

我正在尝试使用 AngularJS，但未能实现不同的独立模块和嵌套视图的组合。

我正在尝试做的事情：

• 最重要的是，一个导航模块（与其他模块完全分开，默认情况下始终存在）
• 然后，根据 URL 改变一个模块，用于内容（最简单的部分）
• 但是，在上述模块中，还有另一个独立的用户界面模块，如搜索/分页工具栏。该模块应该能够与（动态）“内容”模块进行交互。我不确定将工具栏放在单独的模板中还是嵌套模板中更好。

我可以让其中的一部分工作，但不是所有这些的组合。目前，我设法让导航工作（作为默认 $state），但是当我这样做时，其他两个模板似乎失败了（甚至没有调用控制器）

索引.html

客户.html

myApp.js

客户.js

工具栏.js

导航.js

一切仍然很准系统，因为我只是在继续之前尝试设置视图之间的基本交互。

目前，使用上面的代码，只有导航起作用，而其他两个视图被忽略。如果我删除 routes.config() 和 parent: "default" 中的代码，其他两个视图似乎可以代替。这里的继承不太适用。

• 如何让所有三个视图同时工作？（无论内容如何，​​导航始终存在）
• 让工具栏与内容（在本例中为 customerControllers）交互同时仍然是一个独立模块的最佳方式是什么？（不太重要，我的主要问题是第一个问题）

编辑：经过进一步测试，我得出的结论是，父状态以某种方式覆盖了子状态的设置。这很奇怪：如果我删除parent: 'default'并在一个地方配置所有内容，它就可以工作。一旦我添加parent: 'default'它就开始失败，因为父配置优先于子配置......但它不应该完全相反吗？此外，这不是一个真正的解决方案，因为我正在尝试编写彼此独立的模块。

我正在使用 angular-ui-router 加载嵌套的命名视图。

在 index.html 文件中，我有一个未命名的视图和一个命名的视图。

索引.html：

我将 header.html 加载到命名视图header。标题视图有两个命名视图contactsSearch和countries。

页眉.html：

在 index.html 文件的未命名视图中，我想加载contacts.html。

联系人.html：

我使用三个模块：myApp、countries和contacts。我已经为每个模块配置了路由。

MyApp模块：

国家模块：

联系人模块：

我的代码不正确，因为没有显示任何内容，我无法弄清楚原因。经过一番调查，我发现父母只能有一个州，但我需要home.contacts，home.contactsSearch和home.countries有同一个父母：home。

有人可以帮我吗？

我创建了一个 jsfiddle 以获得更多详细信息：https ://jsfiddle.net/cjtnmbjw/3/

谢谢

我正在使用Angular ui 路由器来处理我前端的一些路由。这就是我的路由代码的样子。

我的 html 使用了多个嵌套视图，我会尽力说明

索引.html

/静态/home.html

所以我有多层嵌套

现在，当我第一次加载页面时，我的警报消息

只开一次火。。这是有道理的。但是，假设我在分页中单击“下一页”..

这最终会在我的“ReaderCtrl”中触发一个函数

这会更新 url，从变成这样的东西

像这样

现在是让我把头发扯掉的部分。

我回到路由的阅读器部分中的“解决”代码块。

警报消息出现两次。

通过在 Web 控制台中进行一些调试，我发现订单正常

您可能倾向于知道 NavCtrl 中发生了什么，但我没有在那里拨打任何电话。NavCtrl 中的所有内容都是 ReaderCtrl 可以继承的函数，以更新 /static/partials/home.html 的范围

所以真的，看起来我好像被困在第 3 步了。

有没有人知道为什么我的解决块似乎被触发了两次？

编辑：

经过更多的调试，我似乎发现订单是这样的，在“updatePage”函数执行后立即开始。

所以，我想我现在的问题是......为什么

在第一个警报触发之前不更改 url，但会在第二个警报处/附近更改 url 吗？

编辑2：最终无法解决我的问题，所以我暂时绕过它......我基本上做了一个函数，我假设 $state.go() 在幕后做的事情，并构建了网址。

我必须建立一个包含三列的页面：

我有 3 个分层 ui 状态：

我无法弄清楚将 ui-view 属性放在不同视图 .html 文件中的位置和方式，以实现基于分层状态的非分层视图布局。

索引.html：

库.html：

书.html：

page.html：

显然以分层视图布局结束，这对我的情况是不可接受的（例如状态#/library/1/20）：

是否可以保持状态层次结构但强制子视图成为其父母的兄弟姐妹？

我是 AngularJS 的新手，我正在为我的 SPA 使用 Angular UI-Router。

我要做的是从子视图更新父视图值。我已经浏览了嵌套视图和多视图的 UI-Router 文档，但找不到更新值的方法。

我的用例是，父视图将是标题，每次子视图通过状态转换更改时，我都想更新作为父视图一部分的标题值。

代码 ：

HTML 文件 -

发生 Angular UI-Routing 配置的 JS 文件 -

这是同一代码段的JSFiddle 链接。

我有一个父视图index.html

在app.js

这是我的profile.html

在我的ProfileController

在控制台中显示的数据是

viewprofile当我在profile.html页面中单击时，viewprofile.html正在呈现。但是，我想将函数的值获取allProfiles()到子视图viewprofile并将它们绑定到 html 标签

如何将allProfiles()控制器中的功能输出获取到子视图viewprofile.html

我的应用程序非常简单。我有一个包含标题和正文的主页。在正文部分，我想显示登录页面，如果 URL 更改为“密码/忘记”，我将显示密码重置表单。我的模板：

索引.html：

主页.html：

ui-router 配置是这样的：

现在，当我去“/password/forget”时，任何事情都会发生并且index.html正在显示。当路由更改为 "/password/forget" 时，我想显示forgetPassword.html 。

我知道这是一个很好的问题，但可能是我的“谷歌搜索”技能不足以让我得到我想要的东西。

所以我有一个页面，ng-view主要是index.html

现在我有一个模板 url 为student.html的视图

正如代码所示，在Controller_A我想要三个视图（正确的子视图）中，每个视图都有自己的模板。

路由代码是这样的：

我应该做些什么来使这个想法奏效。我已经阅读了这些教程，不幸的是它们都没有类似的工作，或者我可能正在寻找错误的空间。

等待您的输入。问候！

PS：不抛出 JS 错误