Monaca Onsen UI Discord Chat Github Repo

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: