问题标签 [nested-views]

我目前正在开发一个应用程序，使用 Ionic 构建。我的问题是 $state.go 只能在浏览器中运行，而不能在手机上运行。这似乎是一个常见问题，但是在阅读了很多相同问题的答案之后，我仍然无法弄清楚如何解决它。

一般修复似乎是确保您使用相对 URL，如下所述：Using Angular UI-Router with Phonegap但我仍然无法使其正常工作。我错过了什么？

链接到 plunker：http ://plnkr.co/edit/qFJ1Ld6bhKvKMkSmYQC8?p=preview

App.js 结构：

我正在使用嵌套视图开发我的 UI-Router 应用程序。我定义了一些这样的状态：

使用该应用程序时，我的主视图分为几个区域。在第一个区域，我使用了一个特定的 html 文件。如果我点击一个链接，应用程序会使用$state.go('myState'). 此时，URL 已更改，但页面中未加载子视图。

我在网站上搜索了答案，我从另一个似乎在这里遇到同样问题的人那里找到了这个问题：Angular Router - Url changes but view does not load

你知道我错过了什么吗？

对不起英语不好

我在定位具有多个视图的单个页面上的嵌套视图时遇到了一些问题。这是我的代码。

我的 index.html

我的 2 个部分的 html

此时 viewA 的所有子视图状态都显示得很好。我可以使用 ui-sref 链接添加多个部分并显示不同的状态。但我无法获得任何“viewB”子视图，所以出现。当我将 'root.sectionB1' 放在 'root.sectionA1' 上方时，第二个部分子视图显示得很好。我假设我需要更具体地说明如何引用每个子视图的父级。我在这里错过了什么吗？

我正在尝试使用 Angular ui 路由器创建一个抽象的父状态，该路由器产生一个带有动画的模态掩码，然后在继承模态掩码的子状态中具有单独的动画。父状态将在 CSS 中执行进入和离开动画，但在子状态中会被抑制。

是否可以让子状态和父状态一起或依次执行 ng-enter 和 ng-leave 动画？

这是我的示例代码。

http://codepen.io/drmor9471/pen/LVzvYy/

我很好奇 android 如何在共享元素转换中处理英雄视图的子项，可以在 Google Keep 中看到：

在标准共享元素转换中，在进入动画中，调用活动中的主视图会立即与目标视图（在起始维度）重叠，然后转换动画目标视图维度的变化以到达新位置。

但是，在返回动画中，返回活动的视图仍保留在叠加层的顶部，并且它们是在动画结束之前显示的视图，此时目标（调用活动的）英雄视图会卡入到位。

如果两个英雄视图的内容有任何差异，这会产生相当不和谐的效果——例如，行换行方式不同的文本视图，或者完全不同的子视图。

同时，在 Google Keep 中，共享元素的过渡似乎使内容视图来回淡化，因此这种不和谐的效果相当不明显。因此，填充或换行等方面的差异问题要小得多。

在我自己的应用程序中实现这一点的最佳方式是什么？

这是一个例子：

最终编辑：使用嵌入指令工作 plunker。

编辑：我用第一个答案中给出的解决方案做了第一个 plunker。它有效，但这不是所需的行为，因为模板包含所有部分。

我做了第二个plunker（但显然它不起作用）。我想这主要是因为模板不是partial的父级，而是包含在其中，所以ui-router不太了解我想要什么。

对此的任何帮助将不胜感激！

我们正在使用 Angular Material 和 ui-router 构建一个网站，我们所有的内容页面共享同一个“容器”，因为我们总是想要相同的响应行为。

这个通用容器的代码类似于：

所有页面的标题都可以不同，所以我们的结构基本上是：

问题是，如何在 ui-router 中实现这一点？我们已经做了一些嵌套视图，但我不知道如何做一个通用模板，所以代码可能是这样的：

理想情况下，我们希望只定义一次通用模板视图，并在我们的所有模块中使用它。

在嵌套状态和嵌套视图文档中，我看到的大多是嵌套状态的东西，但我们真正想要的只是一个普通的 html 模板，所以也许我们过于复杂了，并且可能有一种更简单的方法（我很确定它是案子）。我也检查了这个问题，其中一个答案说 ui-router 应该是解决方案，但仅此而已。

也许我们应该做一个指令？

我有一个 SPA 加载以下视图方案：

主页 > 视图 > 子视图 > 子子视图。

主页加载带有主导航的视图。子视图根据主导航中选择的链接显示包含不同项目列表的状态。

这些项目是探索详细信息的链接，这些链接显示在子子视图中，其中我有 3 个选项卡。我正在尝试考虑一种解决方案，以在单击子视图列表上的链接时自动加载详细信息的第一个选项卡。此外，子视图列表中的链接正在传递一个参数来获取我的数据库中的一个对象。

起初，我试图做的是将第一个选项卡放在我的 HTML 中，所以当点击链接时它会显示出来，但它不适合，但我需要更动态地进行操作，一旦我将所有控制器。这是我的路线配置：

可用的 plunker在这里

我正在使用角度ui-router嵌套视图来实现多步骤表单（一种向导），并且在尝试验证表单时遇到了麻烦。该表单在所有嵌套视图中共享，但似乎验证仅影响放置提交按钮的嵌套视图。

嵌套视图：

我在每个嵌套视图中都有一个必需的输入：

表单-step1.html：

表单-step2.html：

在这个嵌套视图（我的向导的最后一步）中，我还有提交按钮，如果表单无效，则禁用：

好吧，对于这个视图的输入，验证工作正常，但它没有记住前一个视图的输入（form-step1.html）。由于所有视图的表单都相同，我希望输入requrired1也应该得到验证。但是，尽管输入的requrired1为空，但表单被认为是有效的。

所以，我的问题是：如何验证表单并牢记所有嵌套视图的输入？

在此先感谢您的帮助。

在应用程序中，我将视图命名为mainContent。

对于这种观点，我只有一条路线。

我将 home.html 加载到名为 view mainContent 的视图中，该视图也名为 view appContent。

主页.html

嵌套命名视图 appContent 的路由在这里。

当我尝试加载http://.../#/home/request/create时，未创建 RequestController 并且未加载视图 createRequest.html。

从视图导航到 request.create 状态：

感谢

我有一个带有嵌套 ui 视图的 Angular 应用程序。在主页上，我有一个子菜单，其中包含两个在主页上呈现的链接。我有 Menu1 显示一个列表，并希望在页面加载时将该列表显示为默认值。我也有 Menu2，一旦单击它会显示不同的列表，但不是默认视图。

我已经让嵌套视图稍微处理错误。我只能在加载时更改为一种状态，不能来回更改状态。单击其中一个嵌套视图后，我收到 404 错误，另一个返回 404 错误。

另外，如何将嵌套视图渲染为加载时的默认视图？就像我希望 menu1 在加载主页时默认呈现在 ui-view 中一样。

应用程序.js

控制器

main.html