Question

我们最近将应用程序从ng-route移至Ui-Router。我们正在尝试重构代码中有关路由的一些要点。

我们的应用程序中有一个列表视图和一个详细视图。详细视图将在列表视图的顶部显示为弹出窗口，因此为了不反复初始化所有列表控制器逻辑，我们将详细视图定义为子视图状态。它看起来像这样：

tbody

它实际上按预期工作。当我从列表视图中打开详细视图时，列表视图（我的意思是控制器）不再运行，当我关闭详细视图时，列表视图仍然存在。

但是现在我们还想直接调用详细视图，而不撤消父。目前，当我直接调用详细状态时，父控制器也会运行..我怎样才能实现这个目标？

我们的情景中，父子关系不合适吗？

Answer 1

根据ui-router doc：

可以使用子状态从更常规的功能向下钻取更具体的一个，或实现主/细节模式。（...）子状态视图通常在父状态创建的视口内呈现。这称为嵌套视图（...）这些子状态共享公共父状态联系人并从父级继承数据和行为。

所以我认为如果你不想要这些行为，你应该使用它。

Answer 2

它确实像这样工作：

$stateProvider
    .state('list',
      {
        url: "/",
        template: '<list-directive></list-directive>'
      })
     .state('detail',
      {
        url: "/detail/{item_id}",
        template: '<detail-directive></detail-directive>'
      })
    .state('list.detail',
      {
        url: "detail/{item_id}",
        template: '<detail-directive></detail-directive>'
      })

但是角度非常脆弱......并且在非常小的变化时表现非常不同。斜线是问题。

子状态list.detail在其URL中没有前导斜杠。但是我们的新状态细节（与list.detail的内容完全相同）应该有一个前导斜杠，因此可以直接调用它。所以我们作为孩子和父母都有相同的状态。

现在我们直接拨打网址＆＃34; host / detail / 5＆＃34;我们转到详细视图而不撤消父级。我们称之为ui-sref =＆＃34; .detail（5）＆＃34;我们转到父

中的子状态（list.detail）

Angular UI-Router：如何在没有父级的情况下调用子状态？

2 个答案: