angular路由参数传递

最新推荐文章于 2021-02-22 23:34:25 发布

置顶 mik201408

最新推荐文章于 2021-02-22 23:34:25 发布

阅读量1.4w

点赞数 1

CC 4.0 BY-SA版权

文章标签： cordova ionic angular

本文链接：https://blog.youkuaiyun.com/mik201408/article/details/50766630

本文介绍了在AngularJS App项目中如何进行页面间参数传递，特别是通过路由进行简单参数传递的方法。通过在app.js中配置ui-router，创建send.html和receiver.html两个界面，演示了如何从send.html向receiver.html传递输入框数据。接收参数时，利用$stateParams获取路由中的参数，若参数过多，可考虑使用Json字符串传递并解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一些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);
	}