Skip to content

Commit 69fda4e

Browse files
ajoslinajoslin
committed
fix(tabs): broadcast tab.shown/tab.hidden to only child scopes
Addresses #588
1 parent 91fbcdc commit 69fda4e

File tree

2 files changed

+356
-272
lines changed

2 files changed

+356
-272
lines changed

Diff for: ‎js/ext/angular/src/directive/ionicTabBar.js

+96-82
Original file line numberDiff line numberDiff line change
@@ -13,89 +13,95 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
1313
$ionicViewService.disableRegisterByTagName('tabs');
1414
}])
1515

16-
.directive('tabs', ['$ionicViewService', function($ionicViewService) {
17-
return {
18-
restrict: 'E',
19-
replace: true,
20-
scope: true,
21-
transclude: true,
22-
controller: ['$scope', '$element', function($scope, $element) {
23-
var _this = this;
24-
25-
$scope.tabCount = 0;
26-
$scope.selectedIndex = -1;
27-
$scope.$enableViewRegister = false;
28-
29-
angular.extend(this, ionic.controllers.TabBarController.prototype);
30-
31-
32-
ionic.controllers.TabBarController.call(this, {
33-
controllerChanged: function(oldC, oldI, newC, newI) {
34-
$scope.controllerChanged && $scope.controllerChanged({
35-
oldController: oldC,
36-
oldIndex: oldI,
37-
newController: newC,
38-
newIndex: newI
39-
});
40-
},
41-
tabBar: {
42-
tryTabSelect: function() {},
43-
setSelectedItem: function(index) {},
44-
addItem: function(item) {}
45-
}
16+
.controller('$ionicTabs', ['$scope', '$ionicViewService', function($scope, $ionicViewService) {
17+
var _this = this;
18+
19+
$scope.tabCount = 0;
20+
$scope.selectedIndex = -1;
21+
$scope.$enableViewRegister = false;
22+
23+
angular.extend(this, ionic.controllers.TabBarController.prototype);
24+
25+
ionic.controllers.TabBarController.call(this, {
26+
controllerChanged: function(oldC, oldI, newC, newI) {
27+
$scope.controllerChanged && $scope.controllerChanged({
28+
oldController: oldC,
29+
oldIndex: oldI,
30+
newController: newC,
31+
newIndex: newI
4632
});
33+
},
34+
tabBar: {
35+
tryTabSelect: function() {},
36+
setSelectedItem: function(index) {},
37+
addItem: function(item) {}
38+
}
39+
});
4740

48-
this.add = function(tabScope) {
49-
tabScope.tabIndex = $scope.tabCount;
50-
this.addController(tabScope);
51-
if(tabScope.tabIndex === 0) {
52-
this.select(0);
53-
}
54-
$scope.tabCount++;
55-
};
41+
this.add = function(tabScope) {
42+
tabScope.tabIndex = $scope.tabCount;
43+
this.addController(tabScope);
44+
if(tabScope.tabIndex === 0) {
45+
this.select(0);
46+
}
47+
$scope.tabCount++;
48+
};
5649

57-
this.select = function(tabIndex, emitChange) {
58-
if(tabIndex !== $scope.selectedIndex) {
59-
60-
$scope.selectedIndex = tabIndex;
61-
$scope.activeAnimation = $scope.animation;
62-
_this.selectController(tabIndex);
63-
64-
var viewData = {
65-
type: 'tab',
66-
typeIndex: tabIndex
67-
};
68-
69-
for(var x=0; x<this.controllers.length; x++) {
70-
if(tabIndex === this.controllers[x].tabIndex) {
71-
viewData.title = this.controllers[x].title;
72-
viewData.historyId = this.controllers[x].$historyId;
73-
viewData.url = this.controllers[x].url;
74-
viewData.uiSref = this.controllers[x].viewSref;
75-
viewData.navViewName = this.controllers[x].navViewName;
76-
viewData.hasNavView = this.controllers[x].hasNavView;
77-
break;
78-
}
79-
}
80-
if(emitChange) {
81-
$scope.$emit('viewState.changeHistory', viewData);
82-
}
83-
} else if(emitChange) {
84-
var currentView = $ionicViewService.getCurrentView();
85-
if(currentView) {
86-
$ionicViewService.goToHistoryRoot(currentView.historyId);
87-
}
88-
}
50+
function controllerByTabIndex(tabIndex) {
51+
for (var x=0; x<_this.controllers.length; x++) {
52+
if (_this.controllers[x].tabIndex === tabIndex) {
53+
return _this.controllers[x];
54+
}
55+
}
56+
}
57+
58+
this.select = function(tabIndex, emitChange) {
59+
if(tabIndex !== $scope.selectedIndex) {
60+
61+
$scope.selectedIndex = tabIndex;
62+
$scope.activeAnimation = $scope.animation;
63+
_this.selectController(tabIndex);
64+
65+
var viewData = {
66+
type: 'tab',
67+
typeIndex: tabIndex
8968
};
9069

91-
$scope.controllers = this.controllers;
70+
var tabController = controllerByTabIndex(tabIndex);
71+
if (tabController) {
72+
viewData.title = tabController.title;
73+
viewData.historyId = tabController.$historyId;
74+
viewData.url = tabController.url;
75+
viewData.uiSref = tabController.viewSref;
76+
viewData.navViewName = tabController.navViewName;
77+
viewData.hasNavView = tabController.hasNavView;
78+
}
9279

93-
$scope.tabsController = this;
80+
if(emitChange) {
81+
$scope.$emit('viewState.changeHistory', viewData);
82+
}
83+
} else if(emitChange) {
84+
var currentView = $ionicViewService.getCurrentView();
85+
if (currentView) {
86+
$ionicViewService.goToHistoryRoot(currentView.historyId);
87+
}
88+
}
89+
};
9490

95-
}],
91+
$scope.controllers = this.controllers;
9692

97-
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
93+
$scope.tabsController = this;
94+
95+
}])
9896

97+
.directive('tabs', ['$ionicViewService', function($ionicViewService) {
98+
return {
99+
restrict: 'E',
100+
replace: true,
101+
scope: true,
102+
transclude: true,
103+
controller: '$ionicTabs',
104+
template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
99105
compile: function(element, attr, transclude, tabsCtrl) {
100106
return function link($scope, $element, $attr) {
101107

@@ -173,9 +179,9 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
173179
$scope.$watch(badgeGet, function(value) {
174180
$scope.badge = value;
175181
});
176-
var badgeStyleGet = $interpolate(attr.badgeStyle || '');
177-
$scope.$watch(badgeStyleGet, function(val) {
178-
$scope.badgeStyle = val;
182+
183+
$attr.$observe('badgeStyle', function(value) {
184+
$scope.badgeStyle = value;
179185
});
180186

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

194200
tabsCtrl.add($scope);
195201

196-
$scope.$watch('isVisible', function(value) {
202+
function cleanupChild() {
197203
if(childElement) {
198204
childElement.remove();
199205
childElement = null;
200-
$rootScope.$broadcast('tab.hidden');
201206
}
202207
if(childScope) {
203208
childScope.$destroy();
204209
childScope = null;
205210
}
206-
if(value) {
211+
}
212+
213+
$scope.$watch('isVisible', function(value) {
214+
if (value) {
215+
cleanupChild();
207216
childScope = $scope.$new();
208217
transclude(childScope, function(clone) {
209218
clone.addClass('pane');
210219
clone.removeAttr('title');
211220
childElement = clone;
212221
$element.parent().append(childElement);
213222
});
214-
$rootScope.$broadcast('tab.shown');
223+
$scope.$broadcast('tab.shown');
224+
} else if (childScope) {
225+
$scope.$broadcast('tab.hidden');
226+
cleanupChild();
215227
}
216228
});
217229

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

232-
$rootScope.$on('$stateChangeSuccess', function(value){
244+
var unregister = $rootScope.$on('$stateChangeSuccess', function(value){
233245
if( $ionicViewService.isCurrentStateNavView($scope.navViewName) &&
234246
$scope.tabIndex !== tabsCtrl.selectedIndex) {
235247
tabsCtrl.select($scope.tabIndex);
236248
}
237249
});
238250

251+
$scope.$on('$destroy', unregister);
252+
239253
};
240254
}
241255
};

0 commit comments

Comments
 (0)