UI-Router隐藏父模板

Question

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

Answer 1

您可以检查状态（路线）何时更改并隐藏父视图。jsfiddle 中的演示。这个工作示例使用AngularUI Router，但逻辑与标准 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);
});