How to change page? Login form

anderson

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.

Fran Diox

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.html

I guess what you want to use is ons-navigator: https://onsen.io/reference/ons-navigator.html

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to change page? Login form