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