ua_boaz ua_boaz - 10 days ago 4
AngularJS Question

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?

Answer

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.

Comments