Skip to content

Commit

Permalink
fix(tabs): broadcast tab.shown/tab.hidden to only child scopes
Browse files Browse the repository at this point in the history 
Addresses #588
  • Loading branch information
@ajoslin
ajoslin committed Feb 13, 2014
1 parent 91fbcdc commit 69fda4e
Show file tree
Hide file tree
Showing 2 changed files with 356 additions and 272 deletions.
178 changes: 96 additions & 82 deletions js/ext/angular/src/directive/ionicTabBar.js
View file
Expand Up @@ -13,89 +13,95 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
$ionicViewService.disableRegisterByTagName('tabs');
}])

.directive('tabs', ['$ionicViewService', function($ionicViewService) {
return {
restrict: 'E',
replace: true,
scope: true,
transclude: true,
controller: ['$scope', '$element', function($scope, $element) {
var _this = this;

$scope.tabCount = 0;
$scope.selectedIndex = -1;
$scope.$enableViewRegister = false;

angular.extend(this, ionic.controllers.TabBarController.prototype);


ionic.controllers.TabBarController.call(this, {
controllerChanged: function(oldC, oldI, newC, newI) {
$scope.controllerChanged && $scope.controllerChanged({
oldController: oldC,
oldIndex: oldI,
newController: newC,
newIndex: newI
});
},
tabBar: {
tryTabSelect: function() {},
setSelectedItem: function(index) {},
addItem: function(item) {}
}
.controller('$ionicTabs', ['$scope', '$ionicViewService', function($scope, $ionicViewService) {
var _this = this;

$scope.tabCount = 0;
$scope.selectedIndex = -1;
$scope.$enableViewRegister = false;

angular.extend(this, ionic.controllers.TabBarController.prototype);

ionic.controllers.TabBarController.call(this, {
controllerChanged: function(oldC, oldI, newC, newI) {
$scope.controllerChanged && $scope.controllerChanged({
oldController: oldC,
oldIndex: oldI,
newController: newC,
newIndex: newI
});
},
tabBar: {
tryTabSelect: function() {},
setSelectedItem: function(index) {},
addItem: function(item) {}
}
});

this.add = function(tabScope) {
tabScope.tabIndex = $scope.tabCount;
this.addController(tabScope);
if(tabScope.tabIndex === 0) {
this.select(0);
}
$scope.tabCount++;
};
this.add = function(tabScope) {
tabScope.tabIndex = $scope.tabCount;
this.addController(tabScope);
if(tabScope.tabIndex === 0) {
this.select(0);
}
$scope.tabCount++;
};

this.select = function(tabIndex, emitChange) {
if(tabIndex !== $scope.selectedIndex) {

$scope.selectedIndex = tabIndex;
$scope.activeAnimation = $scope.animation;
_this.selectController(tabIndex);

var viewData = {
type: 'tab',
typeIndex: tabIndex
};

for(var x=0; x<this.controllers.length; x++) {
if(tabIndex === this.controllers[x].tabIndex) {
viewData.title = this.controllers[x].title;
viewData.historyId = this.controllers[x].$historyId;
viewData.url = this.controllers[x].url;
viewData.uiSref = this.controllers[x].viewSref;
viewData.navViewName = this.controllers[x].navViewName;
viewData.hasNavView = this.controllers[x].hasNavView;
break;
}
}
if(emitChange) {
$scope.$emit('viewState.changeHistory', viewData);
}
} else if(emitChange) {
var currentView = $ionicViewService.getCurrentView();
if(currentView) {
$ionicViewService.goToHistoryRoot(currentView.historyId);
}
}
function controllerByTabIndex(tabIndex) {
for (var x=0; x<_this.controllers.length; x++) {
if (_this.controllers[x].tabIndex === tabIndex) {
return _this.controllers[x];
}
}
}

this.select = function(tabIndex, emitChange) {
if(tabIndex !== $scope.selectedIndex) {

$scope.selectedIndex = tabIndex;
$scope.activeAnimation = $scope.animation;
_this.selectController(tabIndex);

var viewData = {
type: 'tab',
typeIndex: tabIndex
};

$scope.controllers = this.controllers;
var tabController = controllerByTabIndex(tabIndex);
if (tabController) {
viewData.title = tabController.title;
viewData.historyId = tabController.$historyId;
viewData.url = tabController.url;
viewData.uiSref = tabController.viewSref;
viewData.navViewName = tabController.navViewName;
viewData.hasNavView = tabController.hasNavView;
}

$scope.tabsController = this;
if(emitChange) {
$scope.$emit('viewState.changeHistory', viewData);
}
} else if(emitChange) {
var currentView = $ionicViewService.getCurrentView();
if (currentView) {
$ionicViewService.goToHistoryRoot(currentView.historyId);
}
}
};

}],
$scope.controllers = this.controllers;

template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
$scope.tabsController = this;

}])

.directive('tabs', ['$ionicViewService', function($ionicViewService) {
return {
restrict: 'E',
replace: true,
scope: true,
transclude: true,
controller: '$ionicTabs',
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
compile: function(element, attr, transclude, tabsCtrl) {
return function link($scope, $element, $attr) {

Expand Down Expand Up @@ -173,9 +179,9 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
$scope.$watch(badgeGet, function(value) {
$scope.badge = value;
});
var badgeStyleGet = $interpolate(attr.badgeStyle || '');
$scope.$watch(badgeStyleGet, function(val) {
$scope.badgeStyle = val;

$attr.$observe('badgeStyle', function(value) {
$scope.badgeStyle = value;
});

var leftButtonsGet = $parse($attr.leftButtons);
Expand All @@ -193,25 +199,31 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])

tabsCtrl.add($scope);

$scope.$watch('isVisible', function(value) {
function cleanupChild() {
if(childElement) {
childElement.remove();
childElement = null;
$rootScope.$broadcast('tab.hidden');
}
if(childScope) {
childScope.$destroy();
childScope = null;
}
if(value) {
}

$scope.$watch('isVisible', function(value) {
if (value) {
cleanupChild();
childScope = $scope.$new();
transclude(childScope, function(clone) {
clone.addClass('pane');
clone.removeAttr('title');
childElement = clone;
$element.parent().append(childElement);
});
$rootScope.$broadcast('tab.shown');
$scope.$broadcast('tab.shown');
} else if (childScope) {
$scope.$broadcast('tab.hidden');
cleanupChild();
}
});

Expand All @@ -229,13 +241,15 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
}
});

$rootScope.$on('$stateChangeSuccess', function(value){
var unregister = $rootScope.$on('$stateChangeSuccess', function(value){
if( $ionicViewService.isCurrentStateNavView($scope.navViewName) &&
$scope.tabIndex !== tabsCtrl.selectedIndex) {
tabsCtrl.select($scope.tabIndex);
}
});

$scope.$on('$destroy', unregister);

};
}
};
Expand Down

0 comments on commit 69fda4e

Please sign in to comment.