angular路由参数传递

       最近在做一些angularJs的一个App项目，遇到关于页面间参数传递的一些问题，angularJs的参数传递可以有很多方式，例如用Factory，基于factory和$rootScope.$broadcast()的传参， localStorage或sessionStorage传参等等，但是简单的界面传参我们使用路由传递非常方便。

    在AngularJS的app.js中用ui-router定义路由，现在有两个界面，一个传递参数的界面send.html，一个接收传递参数的界面receiver.html，当我们点击传递界面的按钮时将输入框中输入的数据传递到接收界面。

 

传递参数界面

 

接收参数界面

 

	$scope.Onclick = function() {
		$state.go('app.receiver', {
			value:$scope.PageData.Intent
		}, {
			reload : true

		});
	}

使用$stateParams接收参数

	console.log($stateParams);
	$scope.PageData = {
			ReceivValue:$stateParams.value
	}

路由配置（url：'/页面名称/:参数'）

 

 

.state('app.send', {
				url : '/send',
				views : {
					'menuContent' : {
						templateUrl : 'templates/send.html',
						controller : 'SendCtrl'
					}
				}
			}).state('app.receiver', {
				url : '/receiver/:value',
				views : {
					'menuContent' : {
						templateUrl : 'templates/receiver.html',
						controller : 'ReceiverCtrl'
					}
				}
			})

如果传递参数过多，也要使用这种办法进行传递，我们可以采用Json字符串进行传递，到目标界面进行解析就可以了

 

 

		//将对象转化为字符串
		var jsonString = angular.toJson(item)
		$state.go('tab.frmordetransportmessage', {
			jsonString : jsonString
		}, {
			reload : true
		});
	

接收JsonString字符串并进行解析

	//url参数对象
	$scope.V_SaleConsignPlanBill=null;
	// 获取上个界面传递的数据，并进行解析
	if ($stateParams.jsonString != '') {
		$scope.V_SaleConsignPlanBill = angular.fromJson($stateParams.jsonString);
	}