AngularJS中 带参数的页面跳转

项目是ssm+angularJS。其中一个模块设计到页面的跳转并携带参数。如下图所示id=1，点击查看按钮跳转实现查看id=1的同学详情。

查看资料网络普遍采用ui-router,我配置了几次没有成功。尝试了另外的方法。特此记录。

1. 首先在当前页的html中给button设置一个事件,并获取将要传递的id。

<button type="button" class="btn bg-olive btn-xs"   ng-click="toDetails(sid=entity.id)" >查看</button>

2. 当前页的JS 的controller层：传递参数并跳转页面

app.controller('studentController',function($scope,$http){
			$scope.toDetails=function (sid) {
				var hre = '4-studentDetails.html?id=' +sid; //跳转页
				location.href = hre;
			};
	});

3. 跳转页。在跳转页首先接受整个地址，并分割参数id。然后向controller层带上参数发起请求。

app.controller('stuController',function($location,$scope,$http){
   		//接收参数
   		$scope.viewStudent=function(){
   			var urlValue='';
   			var href = location.href; 
   			urlValue = href.substr(href.indexOf("=") + 1);
   			message=angular.fromJson(decodeURI(urlValue));

   			//向后端controller层发起请求
   			$http.get('../student/viewDetails.do?id='+message).success(
   					function(response){
   						$scope.list=response;
   					}
   			);
   		};
   	});

4. 后端:接受请求并返回json给前端

   @ResponseBody
   @RequestMapping("/viewDetails")
   public List<Student> learnDetails(Student student){
       List<Student> stuList = studentService.queryStuById(student.getId());
       return stuList;
   }

参考文献：
[1]:https://blog.csdn.net/xuehu837769474/article/details/80445417#commentBox

---

觉得有用，点个赞再走吧~