javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 14:19:17 +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) {
console.log("CControlelrs changed", newV, oldV);
$scope.$apply();
//$scope.$apply();
});
})
.directive('tabs', function() {
.directive('tabController', function() {
return {
restrict: 'E',
replace: true,
@ -55,17 +55,17 @@ angular.module('ionic.ui', ['ngTouch'])
})
// Generic controller directive
.directive('tabController', function() {
.directive('tabContent', function() {
return {
restrict: 'E',
restrict: 'CA',
replace: true,
transclude: true,
template: '<div ng-show="isVisible" ng-transclude></div>',
require: '^tabs',
scope: {
title: '@'
},
require: '^tabController',
scope: true,
link: function(scope, element, attrs, tabsCtrl) {
scope.title = attrs.title;
scope.icon = attrs.icon;
tabsCtrl.addController(scope);
}
}
@ -75,9 +75,10 @@ angular.module('ionic.ui', ['ngTouch'])
.directive('tabBar', function() {
return {
restrict: 'E',
require: '^tabs',
require: '^tabController',
transclude: true,
replace: true,
scope: true,
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>' +
'</div>'
@ -88,7 +89,7 @@ angular.module('ionic.ui', ['ngTouch'])
return {
restrict: 'E',
replace: true,
require: '^tabs',
require: '^tabController',
scope: {
title: '@',
icon: '@',
@ -97,15 +98,10 @@ angular.module('ionic.ui', ['ngTouch'])
index: '='
},
link: function(scope, element, attrs, tabsCtrl) {
// Store the index of this list item, which
// specifies which tab item it is
//scope.tabIndex = element.index();
console.log('Linked item', scope);
scope.selectTab = function(index) {
console.log('SELECT TAB', scope.index);
tabsCtrl.selectController(scope.index);
};
},
template:
'<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">
<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-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>
<body>
<nav-controller>
<nav-bar></nav-bar>
<content has-header="true" ng-controller="AppCtrl">
<content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
</content>
</nav-controller>
@ -30,7 +58,7 @@
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>' +
'<a href="#" class="button button-success" ng-click="goNext()">Next</a>' +
'</div>')(childScope, cb);

16
hacking/tabsAngular.html
View File

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