0

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

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

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

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

但现在我们也想直接调用详细视图，而不撤销父视图。目前，当我直接调用详细状态时，父控制器也运行..我该如何实现这一点？

父子关系不适合我们的场景吗？

4

2 回答 2

0

根据 ui-router 文档：

子状态可用于从更一般的特征向下钻取到更具体的特征，或实现主/细节模式。(...) 子状态的视图通常呈现在父状态创建的视口内。这称为嵌套视图 (...)这些子状态共享公共父状态联系人并从父状态继承数据和行为。

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

于 2017-07-04T08:03:53.480 回答
0

它确实像这样工作：

$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 具有完全相同的内容）应该有一个前导斜杠，以便可以直接调用它。所以我们作为孩子和父母都有相同的状态。

现在，当我们直接调用 URL“host/detail/5”时，我们会转到详细视图而不撤销父级。我们调用 ui-sref=".detail(5)" 我们进入父级中的子状态（list.detail）

于 2017-07-04T10:31:26.213 回答