【郑州-第133期】如何使用ui-router进行传参？

大家好，我是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.更多讨论

还有其他传参的方法吗？