ui-router参数传递
基本参数:
‘/user/:id'
'/user/{id}'
'/user/{id:int}'
使用正则表达式:
'/user/{id:[0-9]{1,8}'
'/user/{id:.*}'
'/user/*id
匹配所有以user开始的url 并将剩余参数传给id
多个参数:
‘/user?id1&id2'
$StateParams service
// If you had a url on your state of:
url: '/users/:id/details/{type}/{repeat:[0-9]+}?from&to'
// Then you navigated your browser to:
'/users/123/details//0'
// Your $stateParams object would be
{ id:'123', type:'', repeat:'0' }
// Then you navigated your browser to:
'/users/123/details/default/0?from=there&to=here'
// Your $stateParams object would be
{ id:'123', type:'default', repeat:'0', from:'there', to:'here' }
$StateParams仅包含注册在当前状态下的参数,不包含其他状态下的参数,即使是上级的url参数也获取不到
$stateProvider.state('contacts.detail', {
url: '/contacts/:contactId',
controller: function($stateParams){
$stateParams.contactId //*** Exists! ***//
}
}).state('contacts.detail.subitem', {
url: '/item/:itemId',
controller: function($stateParams){
$stateParams.contactId //*** Watch Out! DOESN'T EXIST!! ***//
$stateParams.itemId //*** Exists! ***//
}
})
若想让下级获取到当前状态的参数,需使用resolve()。该函数会在画面渲染出来前先执行完成。
$stateProvider.state('contacts.detail', {
url: '/contacts/:contactId',
controller: function($stateParams){
$stateParams.contactId //*** Exists! ***//
},
resolve:{
contactId: ['$stateParams', function($stateParams){
return $stateParams.contactId;
}]
}
}).state('contacts.detail.subitem', {
url: '/item/:itemId',
controller: function($stateParams, contactId){
contactId //*** Exists! ***//
$stateParams.itemId //*** Exists! ***//
}
})
1 ui-sref、$state.go 的区别
ui-sref 一般使用在 <a>...</a>;
<a ui-sref="message-list">消息中心</a>
$state.go('someState')一般使用在 controller里面;
.controller('firstCtrl', function($scope, $state) {
$state.go('login');
});
这两个本质上是一样的东西,我们看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()方法
2 如何传递参数
首先,要在目标页面定义接受的参数:

传参,
ui-sref:

$state.go:

接收参数,
在目标页面的controller里注入$stateParams,然后 "$stateParams.参数名" 获取

ui-router参数传递的更多相关文章
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- angular : $location & $state(UI router)的关系
次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...
- angularjs ngRoute和ui.router对比
ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
- ngRoute 和 ui.router 的使用方法和区别
在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- [转]AngularJS+UI Router(1) 多步表单
本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现 在线demo演示地址https://rawgit.com/dream ...
- angularJS ui router 多视图单独刷新问题
场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...
随机推荐
- json字符串生成C#实体类的工具
转载:http://www.cnblogs.com/finesite/archive/2011/07/31/2122984.html json作为互联网上轻量便捷的数据传输格式,越来越受到重视.但在服 ...
- E-R图样例
基本知识 基本的ER模型包含三类元素:实体.关系.属性. 实体(Entities):实体是首要的数据对象,常用于表示一个人.地方.某样事物或某个事件.一个特定的实体被称为实体实例(entity ins ...
- NSIS安装包制作
6)闪屏界面,可以在源代码中加入下列代码即可: A.普通效果 以下是代码片段: Function .onInit SetOutPath $TEMP File /oname=spltmp.bmp &qu ...
- python部署工具fabric
两台机器:10.1.6.186.10.1.6.159.fabric部署在10.1.6.186上面 1 执行和1相同的任务,不过排除掉10.1.6.159这台机器 1 #!/usr/bin/pytho ...
- synchronized-异常
对于web应用程序,异常释放锁的情况,很可能对你的应用程序业务逻辑产生必要严重的错误,比如:执行某个队列任务,很多对象都会去等待第一个对象正常执行的结果返回再次去释放锁,那么其中摸个对象发生执行异常了 ...
- linux实操常用命令总结
1. linux目录操作命令 ------目录的增.删.改.查------ cd, pwd, ls, mkdir, mv, ls(du, df, tree) 切换目录,跟window的使用类似 cd ...
- 纯CSS实现文字一行居中,多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
- http://blog.sina.com.cn/s/blog_4a5dbd380101f031.html
http://blog.sina.com.cn/s/blog_4a5dbd380101f031.html mvn clean install
- RocketMQ通信协议
我们先从client端看一个消息是如何发送到服务端,服务端又是如何解析消息的. client端: 构造请求体: 构造请求体: 发送消息体: 下面看服务端: rocketmq的协议服务端解析救灾这里了R ...
- Mybatis 一个搜索框对多个字段进行模糊查询
<select id="list" parameterType="ParamConfigCondition" resultType="Param ...