feat(tab): add select expressions

- Add support for event being available in select/deselect
  callbacks

Closes #5438

Author: wesleycho

src/tabs/docs/readme.md

@@ -33,7 +33,7 @@ AngularJS version of the tabs directive.
 
 * `deselect()`
   <small class="badge">$</small> -
-  An optional expression called when tab is deactivated.
+  An optional expression called when tab is deactivated. Supports $event in template for expression.
 
 * `disable`
   <small class="badge">$</small>
@@ -49,7 +49,7 @@ AngularJS version of the tabs directive.
 
 * `select()`
   <small class="badge">$</small> -
-  An optional expression called when tab is activated.
+  An optional expression called when tab is activated. Supports $event in template for expression.
 
 * `template-url`
   _(Default: `uib/template/tabs/tab.html`)_ -

src/tabs/tabs.js

@@ -5,18 +5,22 @@ angular.module('ui.bootstrap.tabs', [])
     oldIndex;
   ctrl.tabs = [];
 
-  ctrl.select = function(index) {
+  ctrl.select = function(index, evt) {
     if (!destroyed) {
       var previousIndex = findTabIndex(oldIndex);
       var previousSelected = ctrl.tabs[previousIndex];
       if (previousSelected) {
-        previousSelected.tab.onDeselect();
+        previousSelected.tab.onDeselect({
+          $event: evt
+        });
         previousSelected.tab.active = false;
       }
 
       var selected = ctrl.tabs[index];
       if (selected) {
-        selected.tab.onSelect();
+        selected.tab.onSelect({
+          $event: evt
+        });
         selected.tab.active = true;
         ctrl.active = selected.index;
         oldIndex = selected.index;
@@ -148,7 +152,7 @@ angular.module('ui.bootstrap.tabs', [])
         scope.classes = '';
       }
 
-      scope.select = function() {
+      scope.select = function(evt) {
         if (!scope.disabled) {
           var index;
           for (var i = 0; i < tabsetCtrl.tabs.length; i++) {
@@ -158,7 +162,7 @@ angular.module('ui.bootstrap.tabs', [])
             }
           }
 
-          tabsetCtrl.select(index);
+          tabsetCtrl.select(index, evt);
         }
       };
 

src/tabs/test/tabs.spec.js

@@ -42,10 +42,10 @@ describe('tabs', function() {
       scope.deselectSecond = jasmine.createSpy();
       elm = $compile([
         '<uib-tabset class="hello" data-pizza="pepperoni" active="active">',
-        '  <uib-tab index="1" heading="First Tab {{first}}" classes="{{firstClass}}" select="selectFirst()" deselect="deselectFirst()">',
+        '  <uib-tab index="1" heading="First Tab {{first}}" classes="{{firstClass}}" select="selectFirst($event)" deselect="deselectFirst($event)">',
         '    first content is {{first}}',
         '  </uib-tab>',
-        '  <uib-tab index="2" classes="{{secondClass}}" select="selectSecond()" deselect="deselectSecond()">',
+        '  <uib-tab index="2" classes="{{secondClass}}" select="selectSecond($event)" deselect="deselectSecond($event)">',
         '    <uib-tab-heading><b>Second</b> Tab {{second}}</uib-tab-heading>',
         '    second content is {{second}}',
         '  </uib-tab>',
@@ -97,19 +97,25 @@ describe('tabs', function() {
     });
 
     it('should call select callback on select', function() {
+      expect(scope.selectFirst.calls.count()).toBe(1);
       titles().eq(1).find('> a').click();
       expect(scope.selectSecond).toHaveBeenCalled();
+      expect(scope.selectSecond.calls.argsFor(0)[0].target).toBe(titles().eq(1).find('> a')[0]);
       titles().eq(0).find('> a').click();
       expect(scope.selectFirst).toHaveBeenCalled();
+      expect(scope.selectFirst.calls.argsFor(1)[0].target).toBe(titles().eq(0).find('> a')[0]);
     });
 
     it('should call deselect callback on deselect', function() {
       titles().eq(1).find('> a').click();
       expect(scope.deselectFirst).toHaveBeenCalled();
+      expect(scope.deselectFirst.calls.argsFor(0)[0].target).toBe(titles().eq(1).find('> a')[0]);
       titles().eq(0).find('> a').click();
       expect(scope.deselectSecond).toHaveBeenCalled();
+      expect(scope.deselectSecond.calls.argsFor(0)[0].target).toBe(titles().eq(0).find('> a')[0]);
       titles().eq(1).find('> a').click();
       expect(scope.deselectFirst.calls.count()).toBe(2);
+      expect(scope.deselectFirst.calls.argsFor(1)[0].target).toBe(titles().eq(1).find('> a')[0]);
     });
   });
 

template/tabs/tab.html

@@ -1,3 +1,3 @@
 <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item">
-  <a href ng-click="select()" class="nav-link" uib-tab-heading-transclude>{{heading}}</a>
+  <a href ng-click="select($event)" class="nav-link" uib-tab-heading-transclude>{{heading}}</a>
 </li>