fix(ionicTabBar): detect if matches state in all cases

Addresses #894.
This commit is contained in:
Andy Joslin
2014-04-01 08:26:54 -06:00
parent 2a2f657eaf
commit ee2b76864a
2 changed files with 163 additions and 48 deletions

View File

@@ -214,7 +214,8 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
controller: 'ionicTabs',
compile: function(element, attr) {
element.addClass('view');
//We cannot transclude here because it breaks element.data() inheritance on compile
//We cannot use regular transclude here because it breaks element.data()
//inheritance on compile
var innerElement = angular.element('<div class="tabs"></div>');
innerElement.append(element.contents());
element.append(innerElement);
@@ -246,9 +247,26 @@ angular.module('ionic.ui.tabs', ['ionic.service.view'])
};
}])
.controller('ionicTab', ['$scope', '$ionicViewService', '$rootScope', '$element',
function($scope, $ionicViewService, $rootScope, $element) {
.controller('ionicTab', ['$scope', '$ionicViewService', '$attrs', '$location', '$state',
function($scope, $ionicViewService, $attrs, $location, $state) {
this.$scope = $scope;
//All of these exposed for testing
this.hrefMatchesState = function() {
return $attrs.href && $location.path().indexOf(
$attrs.href.replace(/^#/, '').replace(/\/$/, '')
) === 0;
};
this.srefMatchesState = function() {
return $attrs.uiSref && $state.includes( $attrs.uiSref.split('(')[0] );
};
this.navNameMatchesState = function() {
return this.navViewName && $ionicViewService.isCurrentStateNavView(this.navViewName);
};
this.tabMatchesState = function() {
return this.hrefMatchesState() || this.srefMatchesState() || this.navNameMatchesState();
};
}])
/**
@@ -300,27 +318,20 @@ function($rootScope, $animate, $ionicBind, $compile, $ionicViewService, $state,
controller: 'ionicTab',
scope: true,
compile: function(element, attr) {
//Do we have a navView?
var navView = element[0].querySelector('ion-nav-view') ||
var navView = element[0].querySelector('ion-nav-view') ||
element[0].querySelector('data-ion-nav-view');
var navViewName = navView && navView.getAttribute('name');
var tabNavItem = angular.element(
element[0].querySelector('ion-tab-nav') ||
element[0].querySelector('data-ion-tab-nav')
).remove();
//Remove the contents of the element so we can compile them later, if tab is selected
//We don't use regular transclusion because it breaks element inheritance
var tabContent = angular.element('<div class="pane">')
.append( element.contents().remove() );
return function link($scope, $element, $attr, ctrls) {
var childScope, childElement, tabNavElement;
tabsCtrl = ctrls[0],
tabCtrl = ctrls[1];
//Remove title attribute so browser-tooltip does not apear
$element[0].removeAttribute('title');
$ionicBind($scope, $attr, {
animate: '=',
onSelect: '&',
@@ -337,10 +348,18 @@ function($rootScope, $animate, $ionicBind, $compile, $ionicViewService, $state,
tabNavElement.remove();
});
//Remove title attribute so browser-tooltip does not apear
$element[0].removeAttribute('title');
if (navViewName) {
$scope.navViewName = navViewName;
$scope.$on('$stateChangeSuccess', selectTabIfMatchesState);
selectTabIfMatchesState();
tabCtrl.navViewName = navViewName;
}
$scope.$on('$stateChangeSuccess', selectIfMatchesState);
selectIfMatchesState();
function selectIfMatchesState() {
if (tabCtrl.tabMatchesState()) {
tabsCtrl.select($scope);
}
}
tabNavElement = angular.element(
@@ -371,17 +390,6 @@ function($rootScope, $animate, $ionicBind, $compile, $ionicViewService, $state,
}
});
function selectTabIfMatchesState() {
var href = $attr.href.replace(/^#/, '');
var stateName = $attr.uiSref.split('(')[0];
if ($location.path().indexOf(href) === 0 || $state.includes(stateName)) {
// this tab's ui-view is the current one, go to it!
if ($ionicViewService.isCurrentStateNavView($scope.navViewName)) {
tabsCtrl.select($scope);
}
}
}
};
}
};