基本参数:

‘/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.参数名" 获取

 
分类: javascript

ui-router参数传递的更多相关文章

  1. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

  2. angular : $location & $state(UI router)的关系

    次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...

  3. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  4. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  5. ngRoute 与ui.router区别

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  6. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  7. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  8. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  9. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  10. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

随机推荐

  1. MYSQL复习笔记13-触发器trigger

    Date: 20140305Auth: Jin 一.概念1.基本概念触发器是一个被指定关联到一个表的数据对象,触发器是不需要调用的,当对一个表的特别事件出现时,它就被激活.触发器的代码也是由SQL语句 ...

  2. C# mvc 上传多个附件

    <div class="col-xs-12 mcp-list-item" style="margin-top:20px"> <div clas ...

  3. JS操作小数运算,结果莫名其妙出现多位小数问题

    Number类型: Number类型是ECMAScript中最常用和最令人关注的类型了:这种类型使用IEEE754格式来表示整数和浮点数值(浮点数值在某些语言中也被成为双精度数值),为支持各种数据类型 ...

  4. jQuery旋转插件—rotate

    jQuery旋转插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome rotate(angle) 正值表 ...

  5. 解决Hue/hiveserver2报错:java.io.IOException: Job status not available

    sql是:select count(distinct col) from db.table; 排查过程中遇到过几个不同的报错: 1. beeline -u jdbc:hive2://0.0.0.0:1 ...

  6. java正則表達式 match、find匹配位置

    如题.对于java正則表達式这几个方法匹配一次后的,匹配位置搞不太清楚,就写了几个样例.例如以下: String ss="ooaaoo"; Pattern pt=Pattern.c ...

  7. iOS: 环信的推送

    原文:http://m.blog.csdn.net/article/details?id=38824551 1.先创建一个apns证书,链接如下 http://developer.easemob.co ...

  8. 向PE文件植入后门代码技术讨论

    写在前面的话 这篇文章将介绍使用codecaves对PE文件植入后门代码.有几个很好的工具可以帮到你了.比如BackdoorFactory和Shelter将完成相同的工作,甚至绕过一些静态分析几个防病 ...

  9. TensorFlow------单层(全连接层)实现手写数字识别训练及测试实例

    TensorFlow之单层(全连接层)实现手写数字识别训练及测试实例: import tensorflow as tf from tensorflow.examples.tutorials.mnist ...

  10. Hyper-V中的VM如何使用Pass-through Disk

    Configuring Pass-through Disks in Hyper-V http://blogs.technet.com/b/askcore/archive/2008/10/24/conf ...