CODEWITHSUNDEEP
angularjs
SuperNinja
SuperNinja

Reputation: 1596

Angularjs Twitter Bootstrap Directives -- Tabs

I have successfully implemented tabs in a modal with the Angular directives for TB. I have been trying to figure out from the documentation how to make certain things happen when a tab is clicked. No success yet.

View

<tabset>
        <tab ng-repeat="tab in tabs" active="tab.active" heading="{{tab.title}}" disabled="tab.disabled" >
            <div ng-include="tab.content"></div>
        </tab>
    </tabs>

Controller

$scope.tabs = [
        { title:"Home", content:"/beta/application/views/images/uploader/create.html", active: true },
        { title:"Upload", content:"/beta/application/views/images/uploader/upload.html"},
        { title:"Edit", content:"/beta/application/views/images/uploader/edit.html"}
    ];

There is a ng-click="select()", leaving me to think I could call the following. 

$scope.select = function () {
    console.log('testing');
};

Obviously I am wrong.

Thanks

Upvotes: 1

Views: 2162

Answers (1)

BoxerBucks
BoxerBucks

Reputation: 3124

I think you're talking about the AngularUI tabs and I think you are talking about the select attribute on the directive.

If you put the select="scopeMethod()" on the tab directive, and define the controller method like so:

$scope.scopeMethod = function(){
  //Do something meaningful
  alert("You clicked this tab");
}

the method will fire when you click on that tab.

This should also work for tabs that are created within an ng-repeat. See this plunkr

Upvotes: 3

Related Questions