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

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

Answer 2

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 3

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 4

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>