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 right-panel appears on the right-side of the browser with the form to edit that user's contents. When the form is saved or is closed, the right-side panel disappears.

How do you get Angular UI Router to show/hide the right-side panel automatically when the edit state is entered and exited? By default, the template will be added and removed, but the container itself will still exist on the screen.

In the demo application for UI Router, the html layout had empty space allocated for all of the child states, but in the application I am building, I'd really like to hide panels if they are not being used and even slide entire screens in-and-out as states are entered and exited. I'm guessing that I'll have to make use of ng-show and ng-hide in order to do that. How do I go about this with UI Router?

Thanks!

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:

<div id="rightView" ng-show="$state.includes('list.edit')">
    <div ui-view="edit" autoscroll="false"></div>
</div> 

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

Answer 2

The best solution I came up with was something like this:

<div id="rightView" ng-show="$state.current.name === 'adminCompanies.list.edit'">
    <div ui-view autoscroll="false"></div>
</div>

Answer 3

In any way you solve this problem, just make sure that in your .run section on the angular app you declare something like this:

angular.module('yourApp', ['ui.router'])

    .run(
        ['$rootScope', '$state', '$stateParams',
            function ($rootScope, $state, $stateParams){                    
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }
            ]
    )

Otherwise neither $state, nor $stateParams will be accesible from the internal templates. Figured it out reading the ui-router docs and checking the example app's code, just after banging my head against the keyboard because this wasn't working.

Answer 4

Your url must reflect the state mode using querystring: /stuff/1?edit or /stuff/1 that stands for /stuff/1?view

You could use reloadOnSearch=false to instruct AngularJS not to reload the view:

http://docs.angularjs.org/api/ngRoute.$routeProvider

Inside your controller, check the state mode (view or edit) using $routeParams. Catch the edit click event, pass your model to your bar and toggle its visibility accordingly.

See those interesting links:

Can you change a path without reloading the controller in AngularJS?

Updating URL in Angular JS without re-rendering view