7

Suppose a state called projects.new where new is a nested state of projects. Is there a way to hide the parent's template to show only child template?

LookForAngular
  • 1,030
  • 8
  • 18
  • 1
    I was looking for the same, and this answer helped me: http://stackoverflow.com/questions/21696104/how-to-ng-hide-and-ng-show-views-using-angular-ui-router – Ana Sampaio Jan 07 '15 at 10:57
  • 1
    See http://stackoverflow.com/questions/30876130/hiding-parent-state-view-from-child-state-view-in-angularjs-best-practices – z00bs May 12 '16 at 07:50

2 Answers2

0

You can check when the state (route) change and hide parent view. Demo in jsfiddle. This working example use AngularUI Router but the logic is pretty much the same with the standard ngRoute.

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

Or we can checking if the state name contains the parent state name. A simple regex pattern can tell us, state names use dot notation to delimit parent.child.

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

There are two ways to solve this problem.

Addressing the ui view by name

You could either use the named views to declare that your template should be rendered in the correct "parent" ui view by addressing the view by name like done here:

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

This requires either providing named ui-view elements or addressing them by referencing a known grandparent state.

Using a different state hierarchy

Another option is to not have these states inherit from each other (or at least having the .new not being a child of the projects list state. By using a dot in the name, you introduce a substate of the state before the dot. So there are several options:

  • calling the states projects and projects_new make them appear on the same level and thus not trying to render the new part into the list template. (i don't like this approach that much because there is something in common between those states)
  • introducing an abstract state and moving the current "project list" state under this, so that you have projects abstract with two substates projects.list and projects.new where projects.list just uses the url of the parent state. For details please have a look at the great docs at https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-state-usage-examples
Andreas Jägle
  • 11,632
  • 3
  • 31
  • 31