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

Toderp signup and nav controller fixes

Browse Source
This commit is contained in:
Max Lynch
2013-10-04 13:31:16 -05:00
parent 065063fc70
commit b12c93f087
8 changed files with 194 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
dist/ionic-angular.js vendored
View File

@ -68,6 +68,12 @@ angular.module('ionic.ui.nav', ['ionic.service'])
navBar: {
shouldGoBack: function() {
},
show: function() {
this.isVisible = true;
},
hide: function() {
this.isVisible = false;
},
setTitle: function(title) {
$scope.navController.title = title;
},
@ -101,15 +107,16 @@ angular.module('ionic.ui.nav', ['ionic.service'])
.directive('navBar', function() {
return {
restrict: 'E',
require: '^navController',
require: '^navCtrl',
transclude: true,
replace: true,
scope: true,
template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: isHidden}">' +
'<a href="#" ng-click="goBack()" class="button" ng-if="controllers.length > 1">Back</a>' +
'<h1 class="title">{{getTopController().title}}</h1>' +
template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
'<a href="#" ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1">Back</a>' +
'<h1 class="title">{{navController.getTopController().title}}</h1>' +
'</header>',
link: function(scope, element, attrs, navCtrl) {
scope.navController = navCtrl;
scope.goBack = function() {
navCtrl.pop();
}
@ -120,9 +127,17 @@ angular.module('ionic.ui.nav', ['ionic.service'])
.directive('navContent', function() {
return {
restrict: 'ECA',
require: '^navCtrl',
scope: true,
link: function(scope, element, attrs) {
link: function(scope, element, attrs, navCtrl) {
scope.title = attrs.title;
if(attrs.navBar === "false") {
navCtrl.hideNavBar();
} else {
navCtrl.showNavBar();
}
scope.isVisible = true;
scope.pushController(scope);

54
dist/ionic.js vendored
View File

@ -2119,6 +2119,16 @@ ionic.views.TabBar.prototype = {
;
(function(ionic) {
/**
* The NavController makes it easy to have a stack
* of views or screens that can be pushed and popped
* for a dynamic navigation flow. This API is modelled
* off of the UINavigationController in iOS.
*
* The NavController can drive a nav bar to show a back button
* if the stack can be poppped to go back to the last view, and
* it will handle updating the title of the nav bar and processing animations.
*/
ionic.controllers.NavController = function(opts) {
var _this = this;
@ -2135,12 +2145,26 @@ ionic.controllers.NavController = function(opts) {
};
ionic.controllers.NavController.prototype = {
/**
* @return {array} the array of controllers on the stack.
*/
getControllers: function() {
return this.controllers;
},
/**
* @return {object} the controller at the top of the stack.
*/
getTopController: function() {
return this.controllers[this.controllers.length-1];
},
/**
* Push a new controller onto the navigation stack. The new controller
* will automatically become the new visible view.
*
* @param {object} controller the controller to push on the stack.
*/
push: function(controller) {
var last = this.controllers[this.controllers.length - 1];
@ -2175,6 +2199,12 @@ ionic.controllers.NavController.prototype = {
return controller;
},
/**
* Pop the top controller off the stack, and show the last one. This is the
* "back" operation.
*
* @return {object} the last popped controller
*/
pop: function() {
var next, last;
@ -2207,8 +2237,27 @@ ionic.controllers.NavController.prototype = {
return last;
},
/**
* Show the NavBar (if any)
*/
showNavBar: function() {
if(this.navBar) {
this.navBar.show();
}
},
/**
* Hide the NavBar (if any)
*/
hideNavBar: function() {
if(this.navBar) {
this.navBar.hide();
}
},
// Update the nav bar after a push or pop
_updateNavBar: function() {
if(!this.getTopController()) {
if(!this.getTopController() || !this.navBar) {
return;
}
@ -2219,8 +2268,7 @@ ionic.controllers.NavController.prototype = {
} else {
this.navBar.showBackButton(false);
}
},
}
};
})(window.ionic);
;

8
example/toderp2/css/app.css
View File

@ -18,3 +18,11 @@
}
#splash-view .ionic-logo {
}
#signup-bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}

73
example/toderp2/index.html
View File

@ -32,27 +32,82 @@
<!-- The root view controller -->
<nav-ctrl ng-controller="TodoCtrl">
<nav-bar></nav-bar>
</nav-ctrl>
<!-- Splash -->
<script id="splash.html" type="text/ng-template">
<div id="splash-view" class="view fade-in" nav-content>
<div id="splash-view" class="view fade-in" nav-content nav-bar="false">
<img src="img/ionic.png" class="ionic-logo">
</div>
</script>
<!-- Login -->
<script id="login.html" type="text/ng-template">
<div id="login-view" class="view" nav-content ng-controller="LoginCtrl">
<h1>Login</h1>
</div>
</script>
<!-- Signup -->
<script id="signup.html" type="text/ng-template">
<div id="signup-view" class="view" nav-content ng-controller="SignupCtrl"></div>
<div title="Sign up" id="signup-view" class="view" nav-content ng-controller="SignupCtrl"></div>
<main class="content">
<form class="form-horizontal" ng-submit="trySignup(signupForm)">
<div class="container" style="text-align: center">
<h1>Toderp</h1>
<h4>What do you need to derp?</h4>
</div>
<div class="input-group">
<label class="input-wrapper row">
<span class="input-label col-xs-4">Full name</span>
<input class="col-xs-8" type="text" placeholder="" ng-model="signupForm.name">
</label>
<label class="input-wrapper row">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="email" placeholder="" ng-model="signupForm.email">
</label>
<label class="input-wrapper row">
<span class="input-label col-xs-4">Password</span>
<input class="col-xs-8" type="password" placeholder="" ng-model="signupForm.password">
</label>
</div>
<div class="input-group">
<button class="button button-primary button-block">Get derp'n</button>
<div id="signup-error" ng-show="signupError">Unable to signup, please try again.</div>
</div>
</form>
<div id="signup-bottom">
<h3>Already have an account?</h3>
<button class="button button-clear button-block">Sign in</button>
</div>
</main>
</div>
</script>
<!-- Login -->
<script id="login.html" type="text/ng-template">
<div title="Login" id="login-view" class="view" nav-content ng-controller="LoginCtrl">
<main class="content padded">
<form class="form-horizontal" ng-submit="tryLogin(loginForm)">
<div class="input-group inset">
<label class="input-wrapper row">
<span class="input-label col-xs-4">Full name</span>
<input class="col-xs-8" type="text" placeholder="" ng-model="loginForm.name">
</label>
<label class="input-wrapper row">
<span class="input-label col-xs-4">Email</span>
<input class="col-xs-8" type="email" placeholder="" ng-model="loginForm.email">
</label>
<label class="input-wrapper row">
<span class="input-label col-xs-4">Password</span>
<input class="col-xs-8" type="password" placeholder="" ng-model="loginForm.password">
</label>
</div>
<div class="input-group inset">
<button class="button button-primary button-block">Log in</button>
<div id="login-error" ng-show="loginError">Invalid email/password. Please try again.</div>
</div>
</form>
<button ng-click="showSignup()" id="signup-button" class="button button-default button-block">Create an account</button>
</main>
</div>
</script>
<!-- Tasks -->
<script id="tasks.html" type="text/ng-template">
<side-menu-ctrl id="tasks-view" nav-content class="view" ng-controller="TasksCtrl">

17
example/toderp2/js/controllers.js
View File

@ -5,22 +5,21 @@ angular.module('ionic.todo.controllers', ['ionic.todo', 'firebase'])
$scope.candy = 'yes';
$scope.navController.pushFromTemplate('splash.html');
//$scope.navController.pushFromTemplate('login.html');
//$scope.navController.pushFromTemplate('signup.html');
//$scope.navController.pushFromTemplate('tasks.html');
console.log($scope);
$rootScope.$on('angularFireAuth:login', function(evt, user) {
$scope.display.screen = 'tasks';
$scope.navController.pushFromTemplate('tasks.html');
});
$rootScope.$on('angularFireAuth:logout', function(evt, user) {
console.log('Logged out!', evt, user);
$scope.navController.pushFromTemplate('signup.html');
});
$rootScope.$on('angularFireAuth:error', function(evt, err) {
console.log('Login Error!', evt, err);
$scope.navController.pushFromTemplate('signup.html');
});
})
.controller('SplashCtrl', function($scope) {
})
// The login form controller
.controller('LoginCtrl', function($scope, AuthService) {
console.log('Created login Ctrl');
@ -30,6 +29,10 @@ angular.module('ionic.todo.controllers', ['ionic.todo', 'firebase'])
password: 'test'
};
$scope.showSignup = function() {
$scope.navController.pushFromTemplate('signup.html');
};
$scope.tryLogin = function(data) {
$scope.loginError = false;
AuthService.login(data.email, data.password)

18
js/controllers/navController.js
View File

@ -118,6 +118,24 @@ ionic.controllers.NavController.prototype = {
return last;
},
/**
* Show the NavBar (if any)
*/
showNavBar: function() {
if(this.navBar) {
this.navBar.show();
}
},
/**
* Hide the NavBar (if any)
*/
hideNavBar: function() {
if(this.navBar) {
this.navBar.hide();
}
},
// Update the nav bar after a push or pop
_updateNavBar: function() {
if(!this.getTopController() || !this.navBar) {

25
js/ext/angular/src/directive/ionicNav.js vendored
View File

@ -24,6 +24,12 @@ angular.module('ionic.ui.nav', ['ionic.service'])
navBar: {
shouldGoBack: function() {
},
show: function() {
this.isVisible = true;
},
hide: function() {
this.isVisible = false;
},
setTitle: function(title) {
$scope.navController.title = title;
},
@ -57,15 +63,16 @@ angular.module('ionic.ui.nav', ['ionic.service'])
.directive('navBar', function() {
return {
restrict: 'E',
require: '^navController',
require: '^navCtrl',
transclude: true,
replace: true,
scope: true,
template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: isHidden}">' +
'<a href="#" ng-click="goBack()" class="button" ng-if="controllers.length > 1">Back</a>' +
'<h1 class="title">{{getTopController().title}}</h1>' +
template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
'<a href="#" ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1">Back</a>' +
'<h1 class="title">{{navController.getTopController().title}}</h1>' +
'</header>',
link: function(scope, element, attrs, navCtrl) {
scope.navController = navCtrl;
scope.goBack = function() {
navCtrl.pop();
}
@ -76,9 +83,17 @@ angular.module('ionic.ui.nav', ['ionic.service'])
.directive('navContent', function() {
return {
restrict: 'ECA',
require: '^navCtrl',
scope: true,
link: function(scope, element, attrs) {
link: function(scope, element, attrs, navCtrl) {
scope.title = attrs.title;
if(attrs.navBar === "false") {
navCtrl.hideNavBar();
} else {
navCtrl.showNavBar();
}
scope.isVisible = true;
scope.pushController(scope);

6
js/ext/angular/test/nav.html
View File

@ -40,12 +40,12 @@
</head>
<body>
<nav-controller>
<nav-ctrl>
<nav-bar></nav-bar>
<content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
</content>
</nav-controller>
</nav-ctrl>
<script src="../../../../dist/ionic.js"></script>
<script src="../../../../dist/ionic-angular.js"></script>
@ -64,7 +64,7 @@
'</div>')(childScope, cb);
}
angular.module('navTest', ['ionic.ui'])
angular.module('navTest', ['ionic.ui.nav'])
.controller('AppCtrl', function($scope, $compile, $element) {
pushIt($scope, $compile, $element, function(cloned, scope) {