CODEWITHSUNDEEP
angularjstwitter-bootstrap-3tabsevent-handlingangular-ui-bootstrap
josh_boaz
josh_boaz

Reputation: 2023

How to get UI Bootstrap Tabs to send an event when tab is changed

<uib-tabset type="tabs">
  <uib-tab heading="Event Workflow Activities">
    <div ng-include src="'webapp/event/EventWorkflowActivities.tpl.html'"></div>        
  </uib-tab>
</uib-tabset>

I am using UI Bootstrap Tabs like above, is there any way to get broadcast an event when you switch between tabs?

Upvotes: 7

Views: 21631

Answers (1)

nweg
nweg

Reputation: 2865

You can use the select attribute on the tab to execute a function in your controller that does the broadcast. Like this:

<uib-tabset type="tabs">
    <uib-tab heading="Event Workflow Activities" select="tabSelected()">
            <div ng-include src="'webapp/event/EventWorkflowActivities.tpl.html'"></div>        
    </uib-tab>
</uib-tabset>

Add the select attribute like above that points to a function in your controller. I named this one tabSelected();

Now in your controller create the function:

$scope.tabSelected = function () {
    //Broadcast or emit your event here.

    // firing an event upwards
    $scope.$emit('yourEvent', 'data');

    // firing an event downwards
    $scope.$broadcast('yourEvent', {
      someProp: 'value'
    });
};

Take a look at the documentation for more information.

Upvotes: 18

Related Questions