feat(ionTab): allow custom ngClick expression that doesnt select tab

Closes #784

Author: ajoslin

js/ext/angular/src/directive/ionicTabBar.js

@@ -245,6 +245,7 @@ function($scope, $ionicViewService, $rootScope, $element) {
  * @param {expression=} badge-style The style of badge to put on this tab (eg tabs-positive).
  * @param {expression=} on-select Called when this tab is selected.
  * @param {expression=} on-deselect Called when this tab is deselected.
+ * @param {expression=} ng-click By default, the tab will be selected on click. If ngClick is set, it will not.  You can explicitly switch tabs using {@link ionic.controller:ionicTabs#select ionicTabBar controller's select method}.
  */
 .directive('ionTab', ['$rootScope', '$animate', '$ionicBind', '$compile', '$ionicViewService',
 function($rootScope, $animate, $ionicBind, $compile, $ionicViewService) {
@@ -297,6 +298,7 @@ function($rootScope, $animate, $ionicBind, $compile, $ionicViewService) {
 
         tabNavElement = angular.element(
           '<ion-tab-nav' +
+          attrStr('ng-click', attr.ngClick) +
           attrStr('title', attr.title) +
           attrStr('icon', attr.icon) +
           attrStr('icon-on', attr.iconOn) +
@@ -337,14 +339,14 @@ function($rootScope, $animate, $ionicBind, $compile, $ionicViewService) {
   };
 }])
 
-.directive('ionTabNav', function() {
+.directive('ionTabNav', ['$ionicNgClick', function($ionicNgClick) {
   return {
     restrict: 'E',
     replace: true,
     require: ['^ionTabs', '^ionTab'],
     template:
     '<a ng-class="{active: isTabActive(), \'has-badge\':badge}" ' +
-      'ng-click="selectTab($event)" class="tab-item">' +
+      ' class="tab-item">' +
       '<span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>' +
       '<i class="icon {{getIconOn()}}" ng-if="getIconOn() && isTabActive()"></i>' +
       '<i class="icon {{getIconOff()}}" ng-if="getIconOff() && !isTabActive()"></i>' +
@@ -363,6 +365,14 @@ function($rootScope, $animate, $ionicBind, $compile, $ionicViewService) {
         var tabsCtrl = ctrls[0],
           tabCtrl = ctrls[1];
 
+        $scope.selectTab = function(e) {
+          e.preventDefault();
+          tabsCtrl.select(tabCtrl.$scope, true);
+        };
+        if (!$attrs.ngClick) {
+          $ionicNgClick($scope, $element, 'selectTab($event)');
+        }
+
         $scope.getIconOn = function() {
           return $scope.iconOn || $scope.icon;
         };
@@ -373,11 +383,7 @@ function($rootScope, $animate, $ionicBind, $compile, $ionicViewService) {
         $scope.isTabActive = function() {
           return tabsCtrl.selectedTab() === tabCtrl.$scope;
         };
-        $scope.selectTab = function(e) {
-          e.preventDefault();
-          tabsCtrl.select(tabCtrl.$scope, true);
-        };
       };
     }
   };
-});
+}]);

js/ext/angular/test/directive/ionicTabBar.unit.js

@@ -292,13 +292,14 @@ describe('tabs', function() {
     });
 
     it('should compile a <ion-tab-nav> with all of the relevant attrs', function() {
-      setup('title=1 icon-on=2 icon-off=3 badge=4 badge-style=5');
+      setup('title=1 icon-on=2 icon-off=3 badge=4 badge-style=5 ng-click=6');
       var navItem = angular.element(tabsEl[0].querySelector('.tab-item'));
       expect(navItem.attr('title')).toEqual('1');
       expect(navItem.attr('icon-on')).toEqual('2');
       expect(navItem.attr('icon-off')).toEqual('3');
       expect(navItem.attr('badge')).toEqual('4');
       expect(navItem.attr('badge-style')).toEqual('5');
+      expect(navItem.attr('ng-click')).toEqual('6');
 
       expect(navItem.parent()[0]).toBe(tabsCtrl.$tabsElement[0]);
     });
@@ -437,12 +438,20 @@ describe('tabs', function() {
 
     });
 
-    it('should select tab on click', function() {
+    it('should select tab on click by default', function() {
       var el = setup();
       el.triggerHandler('click');
       expect(tabsCtrl.select).toHaveBeenCalledWith(tabCtrl.$scope, true);
     });
 
+    it('should use ngClick if defined', function() {
+      var el = setup('ng-click="doSomething()"');
+      el.scope().doSomething = jasmine.createSpy('doSomething');
+      el.triggerHandler('click');
+      expect(tabsCtrl.select).not.toHaveBeenCalled();
+      expect(el.scope().doSomething).toHaveBeenCalled();
+    });
+
     it('should have title and only title', function() {
       var el = setup('title="<b>hi, {{name}}!</b>"');
       expect(el.find('.tab-title').html()).toBe('<b>hi, !</b>');