Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

I am making an application using AngularJS and want to be able to switch between "tabs" and swap back and forth different "partials" or html templates into a panel/container (using ngInclude).

Here's my template, which is wrapped inside a ngView.

<div class="row">
    <div class="col-md-3">
        <div class="list-group" data-fixed-sidebar data-nav-control>
            <a href="#/analyze/option1" class="list-group-item" data-tab-route="/analyze/option1.*" >Analyze Option 1</a>
            <a href="#/analyze/option2" class="list-group-item" data-tab-route="/analyze/option2.*">Analyze Option 2</a>
            <a href="#/analyze/option3" class="list-group-item" data-tab-route="/analyze/option3.*">Analyze Option 3</a>
            <a href="#/analyze/option4" class="list-group-item" data-tab-route="/analyze/option4.*">Analyze Option 4</a>
        </div>
    </div>
    <div class="col-md-9">
        <div class="panel panel-default">
            <div class="panel-body">
                <div ng-include="child"></div>
            </div>
        </div>
    </div>
</div>

The problem is, when I click on one of the links (for example, the first link which routes to #/analyze/option1) it will reload my controller and lose track of it's current state. I am using $route and $routeProvider and would prefer a solution that keeps using this module.

share|improve this question

1 Answer

up vote 0 down vote

Controllers are meant to be ephemeral. The correct way (TM), in my opinion, to do it would be to put the necessary state in an service, which is initialized in a singleton fashion and will retain state between route changes.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.