mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix(tabs): broadcast tab.shown/tab.hidden to only child scopes
Addresses #588
This commit is contained in:
182
js/ext/angular/src/directive/ionicTabBar.js
vendored
182
js/ext/angular/src/directive/ionicTabBar.js
vendored
@@ -13,89 +13,95 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
|
||||
$ionicViewService.disableRegisterByTagName('tabs');
|
||||
}])
|
||||
|
||||
.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++;
|
||||
};
|
||||
|
||||
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
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
if(emitChange) {
|
||||
$scope.$emit('viewState.changeHistory', viewData);
|
||||
}
|
||||
} else if(emitChange) {
|
||||
var currentView = $ionicViewService.getCurrentView();
|
||||
if (currentView) {
|
||||
$ionicViewService.goToHistoryRoot(currentView.historyId);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.controllers = this.controllers;
|
||||
|
||||
$scope.tabsController = this;
|
||||
|
||||
}])
|
||||
|
||||
.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) {}
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.controllers = this.controllers;
|
||||
|
||||
$scope.tabsController = this;
|
||||
|
||||
}],
|
||||
|
||||
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) {
|
||||
|
||||
@@ -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);
|
||||
@@ -193,17 +199,20 @@ 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');
|
||||
@@ -211,7 +220,10 @@ angular.module('ionic.ui.tabs', ['ionic.service.view', 'ionic.ui.bindHtml'])
|
||||
childElement = clone;
|
||||
$element.parent().append(childElement);
|
||||
});
|
||||
$rootScope.$broadcast('tab.shown');
|
||||
$scope.$broadcast('tab.shown');
|
||||
} else if (childScope) {
|
||||
$scope.$broadcast('tab.hidden');
|
||||
cleanupChild();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user