How to change page? Login form
-
I have a login form and need to show another page when the button is pressed.
I tried “$ scope.ons.screen.presentPage (‘page2.html’);” but it does not work. This shows me an error “TypeError: Can not read property ‘presentPage’ of undefined”
My version of onsen-ui is v1.3.14 (2015-11-24) and AngularJS is v1.4.9
This is my code:
(index.html)
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"/> <title>App</title> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="mobile-web-app-capable" content="yes" /> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" href="lib/onsen/css/onsenui.css" /> <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" /> <!-- JS --> <script src="lib/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <!--<script src="js/jquery-1.12.0.min.js"></script>--> </head> <body> <script src="scripts/index.js"></script> <div ng-controller="LoginController"> <input type="text" placeholder="ID" ng-model="id"> <input type="password" placeholder="Password" ng-model="password"> <ons-button modifier="large" class="login-button" ng-click="login(id, password)">Log In</ons-button> </div> </ons-page> </body> </html>
(index.js)
angular.module('app', ['onsen']); app.controller('LoginController', function($scope){ $scope.login = function(id, password){ //alert("hello"); // This works $scope.ons.screen.presentPage('page2.html'); //Error here } });
I tried to do this (http://stackoverflow.com/questions/23771046/onsen-ui-and-angularjs-change-page) but not working.
angular.module('app', ['onsen']); app.controller('LoginController', function($rootScope){ $rootScope.login = function(id, password){ $rootScope.ons.screen.presentPage('page2.html'); } });
Any solution?
Thanks!
Anderson.
-
Hi! I’m actually quite confused. There is no such a thing as
$scope.ons.screen.presentPage
so I don’t know what you are trying to do. Perhaps it’s something that was deprecated. I recommend you to check a bit more updated guides: https://onsen.io/guide/overview.htmlI guess what you want to use is
ons-navigator
: https://onsen.io/reference/ons-navigator.html