Search code examples
angularjsangular-ui

UI-Router hide parent template

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?

Solution

  • 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);
});