大家好,我是IT修真院郑州分院第三期的学员王相博,一枚正直、纯洁、善良的前端程序员
今天给大家分享一下,修真院官网JS(职业)任务7,深度思考中的知识点——如何使用ui-router进行传参?
1.背景介绍
今天的内容是在angular中使用ui-router时在不同页面之间跳转并传递参数
2.知识剖析
首先在angular之中实现路由跳转功能有其自带的ngRoute还有常用的第三方插件ui-router
选择ui-router来替代自带的ngRouter是因为它更好用更灵活,具体对比则不是本次分享内容
想要页面之间传递参数,则首先要实现跳转
使用ui-router实现跳转有两种方式
一种是使用其ui-sref指令,另一种是使用$state.go()方法
$state.go()方法
通常用在controller里面,如
.controller('heiheihei', function($scope, $state) { $state.go('login'); });
ui-sref方法
通常用在a标签里面或者按钮跳转之类
查看ui-sref的源码可得这两种方法本质上是一样的
element.bind("click", function(e) { var button = e.which || e.button; if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) { var transition = $timeout(function() { // HERE we call $state.go inside of ui-sref $state.go(ref.state, params, options); });
ui-sref最后也是调用了$state.go()方法
具体如何实现传参呢
首先,要在目标页面定义接受的参数:ui-sref传参$state.go传参3.常见问题
获取传递的参数
4.解决方案
在目标页面的controller里注入$stateParams,然后 "$stateParams.参数名" 获取5.编码实战
6.扩展思考
url传参时如何处理
url传参时同样需要在url中事先配置,如
.state("field.positionDetails", { url: "/positionDetails?companyId?companyName?id", templateUrl: "html/list/positionDetails.html", })
在url后接?以及传递的内容
7.参考文献
8.更多讨论
还有其他传参的方法吗?