Angularjs UI路由器隐藏父模板

假设一个名为projects.new的状态，其中new是projects的嵌套状态。

---

是否有办法隐藏父级模板以仅显示子级模板？

您可以检查状态（路由）何时更改并隐藏父级视图。这个工作示例使用了ngRoute，但逻辑与标准ngRoute几乎相同

var parents = ['parent'];
$rootScope.$on('$stateChangeSuccess', function(event, toState) {
    $scope.hideParent = parents.indexOf(toState.name) !== -1 ? false : true;
});

或者我们可以检查状态名称是否包含父状态名称。一个简单的正则表达式模式可以告诉我们，状态名称使用点符号来分隔父项.child

var re = /^projects.\w+/;
$rootScope.$on('$stateChangeSuccess', function(event, toState) {
    $scope.hideParent = re.test(toState.name);
});

---

有两种方法可以解决这个问题

按名称寻址ui视图 您可以使用命名视图声明模板应在正确的“父”ui视图中呈现，方法是按名称对视图进行寻址，如下所示：

这需要提供命名的

ui视图

元素，或者通过引用已知的祖父母状态对它们进行寻址

使用不同的状态层次结构 另一个选项是不让这些状态相互继承（或者至少让

.new

不是

项目

列表状态的子状态）。通过在名称中使用点，可以在点之前引入状态的子状态。因此有几个选项：

• 调用states

  projects

  和

  projects\u new

  会使它们显示在同一级别，因此不会试图将

  new

  部分呈现到列表模板中。（我不太喜欢这种方法，因为这些状态之间有一些共同点）
• 引入一个抽象状态并将当前的“项目列表”状态移动到此状态下，这样您就有了带有两个子状态的

  项目
  抽象。list
  和
  项目。new
  其中
  项目。list
  仅使用父状态的url。有关详细信息，请查看

---

我也在寻找同样的答案，这个答案帮助了我：看到了吗