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.


  • Onsen UI

    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


Log in to reply