javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed #158 - tab bar styles not set

Browse Source
This commit is contained in:
Max Lynch
2013-11-18 18:48:57 -06:00
parent 767d22812c
commit 5f0ae6ca51
4 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
dist/js/ionic-angular.js vendored
View File

@ -25611,11 +25611,24 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
compile: function(element, attr, transclude, tabsCtrl) {
return function($scope, $element, $attr) {
var tabs = $element[0].querySelector('.tabs');
$scope.tabsType = $attr.tabsType || 'tabs-positive';
$scope.tabsStyle = $attr.tabsStyle;
$scope.animation = $attr.animation;
$attr.$observe('tabsStyle', function(val) {
if(tabs) {
angular.element(tabs).addClass($attr.tabsStyle);
}
});
$attr.$observe('tabsType', function(val) {
if(tabs) {
angular.element(tabs).addClass($attr.tabsType);
}
});
$scope.$watch('activeAnimation', function(value) {
//$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse');
$element.addClass($scope.activeAnimation);
@ -25683,7 +25696,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
template: '<div class="tabs">' +
'<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' +
'</div>',
link: function($scope, $element, $attr) {
link: function($scope, $element, $attr, tabsCtrl) {
$element.addClass($scope.tabsType);
$element.addClass($scope.tabsStyle);
}

15
js/ext/angular/src/directive/ionicTabBar.js vendored
View File

@ -54,11 +54,24 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
template: '<div class="content"><tab-controller-bar></tab-controller-bar></div>',
compile: function(element, attr, transclude, tabsCtrl) {
return function($scope, $element, $attr) {
var tabs = $element[0].querySelector('.tabs');
$scope.tabsType = $attr.tabsType || 'tabs-positive';
$scope.tabsStyle = $attr.tabsStyle;
$scope.animation = $attr.animation;
$attr.$observe('tabsStyle', function(val) {
if(tabs) {
angular.element(tabs).addClass($attr.tabsStyle);
}
});
$attr.$observe('tabsType', function(val) {
if(tabs) {
angular.element(tabs).addClass($attr.tabsType);
}
});
$scope.$watch('activeAnimation', function(value) {
//$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse');
$element.addClass($scope.activeAnimation);
@ -126,7 +139,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
template: '<div class="tabs">' +
'<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' +
'</div>',
link: function($scope, $element, $attr) {
link: function($scope, $element, $attr, tabsCtrl) {
$element.addClass($scope.tabsType);
$element.addClass($scope.tabsStyle);
}

11
js/ext/angular/test/directive/ionicTabBar.unit.js
View File

@ -113,6 +113,17 @@ describe('Tabs directive', function() {
scope.$digest();
expect(element.find('a').length).toBe(2);
});
it('Sets style on child tabs', function() {
element = compile('<tabs tabs-style="tabs-positive" tabs-type="tabs-icon-bottom">' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'<tab active="true" title="Item" icon="icon-default"></tab>' +
'</tabs>')(scope);
scope.$digest();
var tabs = element[0].querySelector('.tabs');
expect(angular.element(tabs).hasClass('tabs-positive')).toEqual(true);
expect(angular.element(tabs).hasClass('tabs-icon-bottom')).toEqual(true);
});
});
describe('Tab Item directive', function() {

4
js/ext/angular/test/tabs.html
View File

@ -43,6 +43,8 @@
text-decoration: line-through;
}
</style>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body ng-controller="RootCtrl">
<tabs
@ -129,8 +131,6 @@
</div>
</script>
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('tabsTest', ['ionic'])