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

Some angular stuff

Browse Source
This commit is contained in:
Max Lynch
2013-09-05 16:28:13 -05:00
parent f62000254d
commit 962a3a60a2
3 changed files with 56 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
ext/angular/src/ionicTabBar.js vendored
View File

@ -1,6 +1,7 @@
angular.module('ionic.ui.tabbar', {}) angular.module('ionic.ui.tabbar', {})
.controller('TabBarCtrl', ['$scope', '$element', function($scope, $element) { .controller('TabBarCtrl', ['$scope', '$element', function($scope, $element) {
console.log('Tab controller');
var tabs = $scope.tabs = []; var tabs = $scope.tabs = [];
@ -21,6 +22,7 @@ angular.module('ionic.ui.tabbar', {})
this.selectTabAtIndex = function(index) { this.selectTabAtIndex = function(index) {
$scope.selectedIndex = index; $scope.selectedIndex = index;
console.log('Scope selected tab is', index);
}; };
this.getNumTabs = function() { this.getNumTabs = function() {
@ -49,7 +51,7 @@ angular.module('ionic.ui.tabbar', {})
template: '<footer class="bar bar-tabs bar-footer bar-success">' + template: '<footer class="bar bar-tabs bar-footer bar-success">' +
'<nav class="tabs">' + '<nav class="tabs">' +
'<ul class="tabs-inner">' + '<ul class="tabs-inner">' +
'<tab-item ng-repeat="tab in tabs">' + '<tab-item text="Item" icon="icon-default" ng-repeat="tab in tabs">' +
'</tab-item>' + '</tab-item>' +
'</ul>' + '</ul>' +
'</nav>' + '</nav>' +
@ -65,21 +67,35 @@ angular.module('ionic.ui.tabbar', {})
scope: { scope: {
text: '@', text: '@',
icon: '@', icon: '@',
tabSelected: '@' active: '=',
tabSelected: '@',
}, },
link: function(scope, element, attrs, tabBar) { compile: function(element, attrs, transclude) {
// Set a default item text if none is provided return function(scope, element, attrs, tabBarCtrl) {
attrs.$observe('text', function(value) { var getActive, setActive;
scope.text = value || 'Item';
}); scope.$watch('active', function(active) {
console.log('ACTIVE CHANGED', active);
// Set a default item icon if none is provided });
attrs.$observe('icon', function(value) { };
scope.icon = value || 'icon-default'; },
}); link: function(scope, element, attrs, tabBarCtrl) {
// Store the index of this list item, which
// specifies which tab item it is
scope.tabIndex = element.index();
scope.active = true;
scope.selectTab = function(index) {
console.log('SELECT TAB', index);
tabBarCtrl.selectTabAtIndex(index);
};
tabBarCtrl.addTab(scope);
}, },
template: '<li class="tab-item">' + template: '<li class="tab-item" ng-class="{active:active}">' +
'<a href="#" ng-click="selectTabItem($index)">' + '<a href="#" ng-click="selectTab(tabIndex)">' +
'<i class="{{icon}}"></i>' + '<i class="{{icon}}"></i>' +
'{{text}}' + '{{text}}' +
'</a></li>' '</a></li>'

17
ext/angular/test/ionicTabBar.unit.js
View File

@ -68,14 +68,11 @@ describe('Tab Item directive', function() {
beforeEach(inject(function($compile, $rootScope, $controller) { beforeEach(inject(function($compile, $rootScope, $controller) {
compile = $compile; compile = $compile;
scope = $rootScope; scope = $rootScope;
//ctrl = $controller('TabBarCtrl', { $scope: scope, $element: null });
scope.tabs = [ element = compile('<tab-bar><tabs>' +
{ text: 'Home', icon: 'icon-home' }, '<tab-item active="true" text="Item" icon="icon-default"></tab-item>' +
{ text: 'Fun', icon: 'icon-fun' }, '</tabs></tab-bar>')(scope);
{ text: 'Beer', icon: 'icon-beer' },
];
element = compile('<tab-bar><tabs><tab-item></tab-item></tabs></tab-bar>')(scope);
scope.$digest(); scope.$digest();
})); }));
@ -88,6 +85,10 @@ describe('Tab Item directive', function() {
}); });
it('Click sets correct tab index', function() { it('Click sets correct tab index', function() {
expect(element.find('i').hasClass('icon-default')).toEqual(true); var a = element.find('a:eq(2)');
//spyOn(a, 'click');
spyOn(scope, 'selectTab');
a.click();
expect(scope.selectTab).toHaveBeenCalled();
}); });
}) })

18
ext/angular/test/tabs.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/dist/ionic.css">
<script src="/vendor/angular/1.2.0rc1/angular-1.2.0rc1.min.js"></script>
<script src="/ext/angular/src/ionicContent.js"></script>
<script src="/ext/angular/src/ionicTabBar.js"></script>
</head>
<body ng-app="ionic.ui.tabbar">
<tab-bar>
<tabs>
<tab-item active="true" text="Cats" icon="icon-default" />
<tab-item active="true" text="Cats" icon="icon-default" />
<tab-item active="true" text="Cats" icon="icon-default" />
</tabs>
</tab-bar>
</body>
</html>