CODEWITHSUNDEEP
javascriptangularjs
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70406

Manage tab content with angularjs

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?

Upvotes: 0

Views: 1449

Answers (2)

Joe Minichino
Joe Minichino

Reputation: 2773

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.

Upvotes: 0

AlwaysALearner
AlwaysALearner

Reputation: 43947

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";

Upvotes: 1

Related Questions