Manage tab content with angularjs

Question

I have a tab navigation using bootstrap+jquery like this:

<ul class="nav nav-tabs">
    <li class="active"><a href="#tag1" data-toggle="tab">Tab1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
</ul>

<div ng-app="app">
    <div class="tab-content">
        <div class="tab-pane active" id="tab1"></div>
        <div class="tab-pane" id="tab2"></div>
    </div>
</div>

Now I would like to manage just the content of each pane with angular. Like this

<div ng-app="app">
    <div class="tab-content">
        <div class="tab-pane active" id="tab1" ng-controller="Tab1Ctrl"></div>
        <div class="tab-pane" id="tab2" ng-controller="Tab2Ctrl"></div>
    </div>
</div>

Is this possible with angular? Each controller would have to load its own template and fill it with data. Any suggestions?

@Codezilla there is no routing in the above code, so how would I apply a template to a controller. usually this is done by providing templateUrl in routing provider — DarkLeafyGreen
– DarkLeafyGreen, Commented Aug 6, 2013 at 12:58
You should be able to do this using ng-include. Each template would have its own controller. Also if you wish to load only the default template initially and stop all the other templates from loading, ng-include is the way to go. — AlwaysALearner
– AlwaysALearner, Commented Aug 6, 2013 at 13:13

AlwaysALearner · Accepted Answer · 2013-08-06 13:46:32Z

1

Use ng-include:

<ng-include src="pathTemplate1" ng-controller="Tab1Ctrl"></ng-include>
<ng-include src="pathTemplate2" ng-controller="Tab2Ctrl"></ng-include>

When the user selects a tab, update the source using ng-click handler:

$scope.pathTemplate2 = "partials/tab2.html";

answered Aug 6, 2013 at 13:46

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joe Minichino · Accepted Answer · 2013-08-06 13:50:58Z

0

I suggest using angular-ui-router. Not only you avail of the classi ng-view behaviour but you can change controller on a tab depending on the application state. Look at this here.

answered Aug 6, 2013 at 13:50

Joe Minichino

2,76524 silver badges20 bronze badges

Collectives™ on Stack Overflow

Manage tab content with angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related