按名称寻址ui视图

Question

假设一个名为 projects.new 的州，其中新是项目的嵌套状态。有没有办法隐藏父模板以仅显示子模板？

Answer 1

您可以检查状态（路线）何时更改并隐藏父视图。 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.jic76qxfz。这个工作示例使用Demo in jsfiddle，但逻辑与标准ngRoute几乎相同。

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

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

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

Answer 2

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

按名称寻址ui视图

您可以使用命名视图声明您的模板应该在正确的“父”ui视图中呈现，方法是通过名称来查看视图，如下所示：

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

这需要提供命名的ui-view元素或通过引用已知的祖父母状态来解决它们。

使用不同的状态层次结构

另一种选择是不要让这些状态相互继承（或者至少让.new不是projects列表状态的子项。通过在名称中使用点，你会介绍点之前的状态的子状态。所以有几个选项：

调用状态projects和projects_new会使它们出现在同一级别，因此不会尝试将new部分呈现到列表模板中。（我不喜欢这种方法，因为这些国家之间存在共同点）
引入一个抽象状态并在此下移动当前的“项目列表”状态，以便projects抽象有两个子状态projects.list和projects.new其中projects.list使用父状态的url。有关详细信息，请查看https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-state-usage-examples

UI-Router隐藏父模板

2 个答案:

按名称寻址ui视图

使用不同的状态层次结构