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

fix(tabs): remove cache=false tab view element

Browse Source
This commit is contained in:
Adam Bradley
2014-12-02 23:49:36 -06:00
parent 0fd6e915aa
commit ab99b13be8
3 changed files with 127 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
js/angular/controller/navViewController.js vendored
View File

@@ -12,6 +12,7 @@ IonicModule
function($scope, $element, $attrs, $compile, $controller, $ionicNavBarDelegate, $ionicNavViewDelegate, $ionicHistory, $ionicViewSwitcher) {
var DATA_ELE_IDENTIFIER = '$eleId';
var DATA_DESTROY_ELE = '$destroyEle';
var VIEW_STATUS_ACTIVE = 'active';
var VIEW_STATUS_CACHED = 'cached';
var HISTORY_AFTER_ROOT = 'after-root';
@@ -41,6 +42,8 @@ function($scope, $element, $attrs, $compile, $controller, $ionicNavBarDelegate,
var deregisterInstance = $ionicNavViewDelegate._registerInstance(self, $attrs.delegateHandle);
$scope.$on('$destroy', deregisterInstance);
$scope.$on('$ionicHistory.deselect', self.cacheCleanup);
return viewData;
};
@@ -159,6 +162,16 @@ function($scope, $element, $attrs, $compile, $controller, $ionicNavBarDelegate,
};
self.cacheCleanup = function() {
var viewElements = $element.children();
for (var x = 0, l = viewElements.length; x < l; x++) {
if (viewElements.eq(x).data(DATA_DESTROY_ELE)) {
$ionicViewSwitcher.destroyViewEle(viewElements.eq(x));
}
}
};
self.clearCache = function() {
var viewElements = $element.children();
var viewElement, viewScope;

1
js/angular/controller/tabsController.js vendored
View File

@@ -45,6 +45,7 @@ function($scope, $ionicHistory, $element) {
_selectedTab = null;
tab.$tabSelected = false;
(tab.onDeselect || angular.noop)();
tab.$broadcast && tab.$broadcast('$ionicHistory.deselect');
}
};

116
test/unit/angular/directive/navView.unit.js
View File

@@ -102,8 +102,49 @@ describe('Ionic nav-view', function() {
ionViewCacheFalsePropertyState = {
template: '<ion-view>ionViewCacheFalsePropertyState</ion-view>',
cache: false
};
},
tabAbstractState = {
abstract: true,
views: {
'root': {
template: '<ion-tabs>' +
'<ion-tab><ion-nav-view name="tab1"></ion-nav-view></ion-tab>' +
'<ion-tab><ion-nav-view name="tab2"></ion-nav-view></ion-tab>' +
'<ion-tab><ion-nav-view name="tab3"></ion-nav-view></ion-tab>' +
'<ion-tab><ion-view><h2>Inline Tab</h2></ion-view></ion-tab>' +
'</ion-tabs>'
}
}
},
tab1page1State = {
views: {
'tab1': {
template: 'tab1page1'
}
}
},
tab2page1State = {
views: {
'tab2': {
template: 'tab2page1'
}
}
},
tab3page1State = {
views: {
'tab3': {
template: 'tab3page1'
}
}
},
tab3page2NoCacheState = {
cache: false,
views: {
'tab3': {
template: 'tab3page2NoCache'
}
}
}
beforeEach(module(function ($stateProvider) {
$stateProvider
.state('a', aState)
@@ -128,7 +169,12 @@ describe('Ionic nav-view', function() {
.state('ionView1', ionView1State)
.state('ionView2', ionView2State)
.state('ionViewCacheFalseAttr', ionViewCacheFalseAttrState)
.state('ionViewCacheFalseProperty', ionViewCacheFalsePropertyState);
.state('ionViewCacheFalseProperty', ionViewCacheFalsePropertyState)
.state('tabAbstract', tabAbstractState)
.state('tabAbstract.tab1page1', tab1page1State)
.state('tabAbstract.tab2page1', tab2page1State)
.state('tabAbstract.tab3page1', tab3page1State)
.state('tabAbstract.tab3page2', tab3page2NoCacheState);
}));
beforeEach(inject(function(_$compile_, $ionicConfig, $rootScope) {
@@ -901,6 +947,70 @@ describe('Ionic nav-view', function() {
expect(divs.eq(0).text()).toBe('page2');
}));
it('should create and cache tabs', inject(function ($state, $q, $timeout, $compile, $ionicConfig) {
elem.append($compile('<ion-nav-view name="root"></ion-nav-view>')(scope));
$state.go(tab1page1State);
$q.flush();
$timeout.flush();
var tab1Ele = elem[0].querySelector('ion-nav-view[name="tab1"]');
expect(tab1Ele.getAttribute('nav-view')).toBe('active');
$state.go(tab2page1State);
$q.flush();
$timeout.flush();
var tab2Ele = elem[0].querySelector('ion-nav-view[name="tab2"]');
expect(tab1Ele.getAttribute('nav-view')).toBe('cached');
expect(tab2Ele.getAttribute('nav-view')).toBe('active');
$state.go(tab3page1State);
$q.flush();
$timeout.flush();
var tab3Ele = elem[0].querySelector('ion-nav-view[name="tab3"]');
expect(tab1Ele.getAttribute('nav-view')).toBe('cached');
expect(tab2Ele.getAttribute('nav-view')).toBe('cached');
expect(tab3Ele.getAttribute('nav-view')).toBe('active');
$state.go(tab1page1State);
$q.flush();
$timeout.flush();
expect(tab1Ele.getAttribute('nav-view')).toBe('active');
expect(tab2Ele.getAttribute('nav-view')).toBe('cached');
expect(tab3Ele.getAttribute('nav-view')).toBe('cached');
}));
it('should not cache a tab with cache false state property', inject(function ($state, $q, $timeout, $compile, $ionicConfig) {
elem.append($compile('<ion-nav-view name="root"></ion-nav-view>')(scope));
$state.go(tab3page2NoCacheState);
$q.flush();
$timeout.flush();
$timeout.flush();
var tab3NoCacheEle = elem[0].querySelector('ion-nav-view[name="tab3"]');
expect(tab3NoCacheEle.getAttribute('nav-view')).toBe('active');
var tab3InnerEle = tab3NoCacheEle.querySelector('[nav-view="active"]');
expect(tab3InnerEle.innerText).toEqual('tab3page2NoCache');
$state.go(tab1page1State);
$q.flush();
$timeout.flush();
$timeout.flush();
var tab1Ele = elem[0].querySelector('ion-nav-view[name="tab1"]');
expect(tab3NoCacheEle.getAttribute('nav-view')).toBe('cached');
expect(tab1Ele.getAttribute('nav-view')).toBe('active');
expect(tab1Ele.innerText).toEqual('tab1page1');
tab3InnerEle = tab3NoCacheEle.querySelector('[nav-view="active"]');
expect(tab3InnerEle).toBe(null);
}));
});
angular.module('ngMock').config(function ($provide) {