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

Fixed tabs angular demo and made it better

Browse Source
This commit is contained in:
Max Lynch
2013-09-19 15:58:03 -05:00
parent 81f8bd811c
commit ed5cb0ca5f
3 changed files with 50 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
hacking/TabAngular.js
View File

@ -34,11 +34,11 @@ angular.module('ionic.ui', ['ngTouch'])
$scope.$watch('controllers', function(newV, oldV) { $scope.$watch('controllers', function(newV, oldV) {
console.log("CControlelrs changed", newV, oldV); console.log("CControlelrs changed", newV, oldV);
$scope.$apply(); //$scope.$apply();
}); });
}) })
.directive('tabs', function() { .directive('tabController', function() {
return { return {
restrict: 'E', restrict: 'E',
replace: true, replace: true,
@ -55,17 +55,17 @@ angular.module('ionic.ui', ['ngTouch'])
}) })
// Generic controller directive // Generic controller directive
.directive('tabController', function() { .directive('tabContent', function() {
return { return {
restrict: 'E', restrict: 'CA',
replace: true, replace: true,
transclude: true, transclude: true,
template: '<div ng-show="isVisible" ng-transclude></div>', template: '<div ng-show="isVisible" ng-transclude></div>',
require: '^tabs', require: '^tabController',
scope: { scope: true,
title: '@'
},
link: function(scope, element, attrs, tabsCtrl) { link: function(scope, element, attrs, tabsCtrl) {
scope.title = attrs.title;
scope.icon = attrs.icon;
tabsCtrl.addController(scope); tabsCtrl.addController(scope);
} }
} }
@ -75,9 +75,10 @@ angular.module('ionic.ui', ['ngTouch'])
.directive('tabBar', function() { .directive('tabBar', function() {
return { return {
restrict: 'E', restrict: 'E',
require: '^tabs', require: '^tabController',
transclude: true, transclude: true,
replace: true, replace: true,
scope: true,
template: '<div class="tabs tabs-primary">' + template: '<div class="tabs tabs-primary">' +
'<tab-item title="{{controller.title}}" icon="{{controller.icon}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' + '<tab-item title="{{controller.title}}" icon="{{controller.icon}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' +
'</div>' '</div>'
@ -88,7 +89,7 @@ angular.module('ionic.ui', ['ngTouch'])
return { return {
restrict: 'E', restrict: 'E',
replace: true, replace: true,
require: '^tabs', require: '^tabController',
scope: { scope: {
title: '@', title: '@',
icon: '@', icon: '@',
@ -97,15 +98,10 @@ angular.module('ionic.ui', ['ngTouch'])
index: '=' index: '='
}, },
link: function(scope, element, attrs, tabsCtrl) { link: function(scope, element, attrs, tabsCtrl) {
// Store the index of this list item, which console.log('Linked item', scope);
// specifies which tab item it is
//scope.tabIndex = element.index();
scope.selectTab = function(index) { scope.selectTab = function(index) {
console.log('SELECT TAB', scope.index);
tabsCtrl.selectController(scope.index); tabsCtrl.selectController(scope.index);
}; };
}, },
template: template:
'<a href="#" ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' + '<a href="#" ng-class="{active:active}" ng-click="selectTab()" class="tab-item">' +

32
hacking/navAngular.html
View File

@ -9,13 +9,41 @@
<link rel="stylesheet" href="../dist/ionic.css"> <link rel="stylesheet" href="../dist/ionic.css">
<script src="/vendor/angular/1.2.0rc2/angular.js"></script> <script src="/vendor/angular/1.2.0rc2/angular.js"></script>
<script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script> <script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
<script src="/vendor/angular/1.2.0rc2/angular-animate.js"></script>
<style>
.reveal-animation {
/*
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
*/
}
.reveal-animation.ng-enter {
-webkit-transition: .2s ease-in-out all;
-webkit-transform:translate3d(100%,0,0) ;
}
.reveal-animation.ng-enter-active {
-webkit-transform:translate3d(0,0,0) ;
}
.reveal-animation.ng-leave {
-webkit-transition: .2s ease-in-out all;
-webkit-transform:translate3d(0%,0,0);
}
.reveal-animation.ng-leave-active {
-webkit-transition: .2s ease-in-out all;
-webkit-transform:translate3d(-100%,0,0);
}
</style>
</head> </head>
<body> <body>
<nav-controller> <nav-controller>
<nav-bar></nav-bar> <nav-bar></nav-bar>
<content has-header="true" ng-controller="AppCtrl"> <content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
</content> </content>
</nav-controller> </nav-controller>
@ -30,7 +58,7 @@
pageNumber++; pageNumber++;
var el = $compile('<div title="Home: ' + pageNumber + '" ng-controller="CatsCtrl" nav-content has-header="true" ng-show="isVisible">' + var el = $compile('<div title="Home: ' + pageNumber + '" ng-controller="CatsCtrl" nav-content has-header="true" class="reveal-animation" ng-show="isVisible">' +
'<h1>' + pageNumber + '</h1>' + '<h1>' + pageNumber + '</h1>' +
'<a href="#" class="button button-success" ng-click="goNext()">Next</a>' + '<a href="#" class="button button-success" ng-click="goNext()">Next</a>' +
'</div>')(childScope, cb); '</div>')(childScope, cb);

14
hacking/tabsAngular.html
View File

@ -16,8 +16,8 @@
</style> </style>
</head> </head>
<body> <body>
<tabs> <tab-controller>
<tab-controller title="Home"> <div title="Home" icon="icon-home" class="tab-content">
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1> <h1 class="title">Tab Bars</h1>
</header> </header>
@ -29,26 +29,26 @@
</a> </a>
</ul> </ul>
</content> </content>
</tab-controller> </div>
<tab-controller title="About"> <div title="About" icon="icon-info" class="tab-content">
<header class="bar bar-header bar-success"> <header class="bar bar-header bar-success">
<h1 class="title">About</h1> <h1 class="title">About</h1>
</header> </header>
<content has-header="true" has-tabs="true"> <content has-header="true" has-tabs="true">
<h1>About Us</h1> <h1>About Us</h1>
</content> </content>
</tab-controller> </div>
<tab-controller title="Settings"> <div title="Settings" icon="icon-gear" class="tab-content">
<header class="bar bar-header bar-dark"> <header class="bar bar-header bar-dark">
<h1 class="title">Settings</h1> <h1 class="title">Settings</h1>
</header> </header>
<content has-header="true" has-tabs="true"> <content has-header="true" has-tabs="true">
<h1>Settings</h1> <h1>Settings</h1>
</content> </content>
</div>
</tab-controller> </tab-controller>
</tabs>
<script src="TabBarController.js"></script> <script src="TabBarController.js"></script>
<script src="TabAngular.js"></script> <script src="TabAngular.js"></script>