How to pass data between pages?

anderson

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

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!

Fran Diox

@anderson Hi! Have a look at this issue https://github.com/OnsenUI/OnsenUI/issues/1793

TheSegfault created this issue in OnsenUI/OnsenUI

closed Sending custom data to new page issue #1793

anderson

@Fran-Diox Thank you! :+1: