javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Closes #784
This commit is contained in:
Andy Joslin
2014-03-15 09:45:08 -06:00
parent 0ffb748fc7
commit 4427e8778c
2 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
js/ext/angular/src/directive/ionicTabBar.js vendored
View File

@@ -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);
};
};
}
};
});
}]);

13
js/ext/angular/test/directive/ionicTabBar.unit.js
View File

@@ -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>');