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

Start of nav controller with angular

Browse Source
This commit is contained in:
Max Lynch
2013-09-18 12:52:16 -05:00
parent 771cdc3964
commit 77bcb4af58
4 changed files with 131 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
hacking/NavAngular.js Normal file
View File

@ -0,0 +1,79 @@
angular.module('ionic.ui', ['ngTouch'])
.directive('content', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
hasHeader: '@',
hasTabs: '@'
},
template: '<div class="content" ng-class="{\'has-header\': hasHeader, \'has-tabs\': hasTabs}" ng-transclude></div>'
}
})
.controller('NavCtrl', function($scope) {
var _this = this;
angular.extend(this, NavController.prototype);
NavController.call(this, {
content: {
},
navBar: {
shouldGoBack: function() {
},
setTitle: function(title) {
},
showBackButton: function(show) {
},
}
});
})
.directive('navController', function() {
return {
restrict: 'E',
replace: true,
scope: {},
transclude: true,
controller: 'NavCtrl',
//templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
template: '<div class="view"><div ng-transclude></div></div>',
compile: function(element, attr, transclude, tabsCtrl) {
return function($scope, $element, $attr) {
};
}
}
})
.directive('navBar', function() {
return {
restrict: 'E',
require: '^navController',
transclude: true,
replace: true,
template: '<header id="nav-bar" class="bar bar-header bar-dark">' +
'<h1 class="title">{{title}}</h1>' +
'</header>'
}
})
.directive('navContent', function() {
return {
restrict: 'E',
require: '^navController',
scope: {
title: '='
},
transclude: true,
replace: true,
template: '<div ng-transclude></div>',
link: function(scope, element, attrs, tabsCtrl) {
scope.$watch('title', function(value) {
console.log('Title chnaged', value);
});
}
}
});

8
hacking/NavController.js
View File

@ -35,13 +35,13 @@
// Actually switch the active controllers // Actually switch the active controllers
// Remove the old one // Remove the old one
last && last.detach(); //last && last.detach();
// Grab the top controller on the stack // Grab the top controller on the stack
var next = this.controllers[this.controllers.length - 1]; var next = this.controllers[this.controllers.length - 1];
// TODO: No DOM stuff here // TODO: No DOM stuff here
this.content.el.appendChild(next.el); //this.content.el.appendChild(next.el);
// Switch to it (TODO: Animate or such things here) // Switch to it (TODO: Animate or such things here)
this.topController = next; this.topController = next;
@ -63,12 +63,12 @@
last = this.controllers.pop(); last = this.controllers.pop();
// Remove the old one // Remove the old one
last && last.detach(); //last && last.detach();
next = this.controllers[this.controllers.length - 1]; next = this.controllers[this.controllers.length - 1];
// TODO: No DOM stuff here // TODO: No DOM stuff here
this.content.el.appendChild(next.el); //this.content.el.appendChild(next.el);
// Switch to it (TODO: Animate or such things here) // Switch to it (TODO: Animate or such things here)
this.topController = next; this.topController = next;

35
hacking/navAngular.html Normal file
View File

@ -0,0 +1,35 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Nav Bars</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../dist/ionic.css">
<script src="/vendor/angular/1.2.0rc2/angular-1.2.0rc2.min.js"></script>
<script src="/vendor/angular/1.2.0rc2/angular-touch.js"></script>
</head>
<body>
<nav-controller>
<header id="nav-bar" class="bar bar-header bar-dark">
<h1 class="title"></h1>
</header>
<content class="has-header content" id="content">
<nav-content title="Home">
<h1>{{title}}</h1>
</nav-content>
</content>
</nav-controller>
<script src="NavController.js"></script>
<script src="NavAngular.js"></script>
<script>
angular.module('navTest', ['ionic.ui']);
</script>
</body>
</html>

13
hacking/tabs.html
View File

@ -43,6 +43,19 @@
</div> </div>
</main> </main>
<nav id="tab-bar" class="tabs tabs-success"> <nav id="tab-bar" class="tabs tabs-success">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav> </nav>
</section> </section>