How to ng-hide and ng-show views using angular ui router?

Question

Imagine an application has a List page, such as a table showing a list of users. There is a button on each row of the table called \"Edit\", and when this is clicked, a righ

Answer 1

Angular's ui-router offers a clean method for toggling nested views.

First inject $state into your hypothetical "list page" controller. Then expose it to the local $scope:

.controller('ListPageCtrl', function($scope, $state) {
    $scope.$state = $state;
})

The $state variable we injected has a nice "includes" method. $state.includes() takes a string as an argument and checks that string against the current state name. It returns true if the state name matches the string and false if not. This makes it very nice to use with ng-show or ng-hide.

Use ui-router's $state.includes() instead with the same template as egervari:

Besides switching to the includes method I also added a unique name to the ui-view attribute. You'll want to name your views once you have more then like two. This will make them easier to keep track of in your templates and logic.

To add names to your views. Change 1 into 2:

// 1
.state('list.edit', {
    url: 'list/edit/:id',
    templateUrl: 'template/edit.html',
    controller: 'ListPageEditCtrl'
})

// 2
.state('list.edit', {
    url: 'list/edit/:id',
    views: {
        'edit': { // this is the unique name you can reference later
            templateUrl: 'template/edit.html',
            controller: 'ListPageEditCtrl'
        }
    }
});