How to pass data between pages?



  • How can you pass data between pages in ONSENUI v2.1.0?

    (I have read the documentation)

    My code:

    <!doctype html>
    <html lang="en" ng-app="my-app">
    <head>
        <title>App</title>
        <meta charset="utf-8">
    
        <!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
        
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
    
    </head>
    <body>
        <ons-navigator var="navegador" page="example.html"></ons-navigator>
    
        <ons-template id="example.html">
            <ons-page ng-controller="exampleController">
                <ons-toolbar>
                <div class="center">
                    Home
                </div>
                </ons-toolbar>
                <ons-list>
                    <ons-list-item modifier="longdivider" tappable ng-click="editUser(nombre)">
                        <div class="center">
                            <ons-input type="text" placeholder="Name" ng-model="name"></ons-input>
                        </div>
                    </ons-list-item>
                </ons-list>
                <div style="text-align:center">
                <ons-button ng-click="save(name)">SAVE</ons-button></p>
                </div>
            </ons-page>
        </ons-template>
    
        <ons-template id="user.html">
            <ons-page ng-controller="UserController">
            <ons-toolbar>
                <div class="left">
                    <ons-back-button>Atras</ons-back-button>
                </div>
                <div class="center">
                    User
                </div>
            </ons-toolbar>
            <p>User: {{username}}</p>
            </ons-page>
        </ons-template>
        
    
        <script type="text/javascript">
        var app = angular.module('my-app', ['onsen']);
        app.controller('exampleController', function($scope) {
            $scope.save= function(name){
                options = {
                    data: {
                        name:name
                    }
                };
                $scope.navegador.pushPage("user.html",options);
            }
        });
    
        app.controller('UserController', function($scope) {
    
            //var user = navegador.topPage.data.user;
            var user = $scope.navegador.topPage.data.user;
            $scope.username=user;
            console.log(user);
        });
        </script>
    
    </body>
    </html>
    

    Thanks!


  • Onsen UI



  • @Fran-Diox Thank you! :+1:


Log in to reply