基本参数:

‘/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. Vue(小码哥王洪元)笔记06路由,url的hash,history,router-linke,路由跳转,动态路由,懒加载,路由嵌套,router参数传递,导航守卫

    1.什么是路由 路由器提供了两种机制:路由和传送 路由:数据报从来源到目的地的路径 传输:将输入端的数据转移到合适的输出端 路由有一个非常重要的概念教路由表 路由表本质上就是一个映射表,决定了数据包的 ...

  2. AngularUI Router

    UI-Router是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染,而不是仅仅的只改变路由(传统AngularJS应用实用的方式).该模块为开发者提供了很多视图(View ...

  3. 深入 AngularUI Router

    翻译:深入 AngularUI Router 原文地址:http://www.ng-newsletter.com/posts/angular-ui-router.html ui-router: htt ...

  4. angular Tabs (ui.bootstrap.tabs)

    1:引入基础文件搭建环境 <pre name="code" class="html"><link rel="stylesheet&q ...

  5. 《慕课React入门》总结

    React 入门与实战 react组件 虚拟DOM的概念 这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...

  6. AngularJS中ui-router全攻略

    首先是angular-ui-router的基本用法. ■ 如何引用依赖angular-ui-router angular.module('app',["ui.router"]).c ...

  7. angularJS1.6.3个人理解(后续更新4.4.7)

    AngularJS AngularJS基础 AngularJS简介 AngularJS是一个用于构建单页面应用的前端JS框架,在前端践行了MVC设计模式. AngularJS是一个前端JS框架,或者叫 ...

  8. AngularJs ui-router 路由的简单介绍

    之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...

  9. AngularJS中ngRouter和uiRouter的区别

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

  10. 面试题HTML +CSS

    HTML+CSS部分 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者 ...

最新文章

  1. 番茄时间管理和四象限工作法完美搭配造就职场神器
  2. Sass学习笔记 -- 初步了解函数、运算、条件判断及循环
  3. php中pregmatch,php中preg_match的isU代表什么意思
  4. MySQL于ON DUPLICATE KEY UPDATE采用
  5. Leetcode -MySQL-178. 分数排名
  6. Python之math库
  7. popup弹出html页面,在页面加载时打开所有弹出窗口popup.html
  8. 【白皮书分享】2022年私域运营趋势及创业机会.pdf(附下载链接)
  9. Unity使用自定义资源(.asset)配置数据
  10. 《Android 源码设计模式解析与实战》— Android 书籍
  11. 一个Python 爬虫程序
  12. logistic映射图像加密matlab,基于Logistic映射与排序变换的图像加密算法
  13. qpushbutton设置居中_在右侧对齐图标并将文本居中放置在QPushButton中
  14. 简单又较隐蔽的PHP后门
  15. wordpress友联_WordPress如何添加友情链接
  16. 水平+垂直 居中的方法
  17. 全局函数的名字应当使用“动词”或者“动词+名词”(动宾词组)
  18. 音频信号耦合为何要用极性电容?如何选型?
  19. 全靠我啃烂了这份2021最新面试题!吊打面试官
  20. java第三次试验报告

热门文章

  1. python flask 分页_Python利用flask sqlalchemy实现分页效果
  2. 源码生成网站,开发帮助网站
  3. Django使用orm创建数据表字段常用命令
  4. undefined: resolver.BuildOption
  5. Win10安装python扩展的几种方式
  6. git log 查看自己修改的行数_Git 笔记 day2
  7. python使用长ping命令_在Python中调用Ping命令,批量IP的方法
  8. MACOS上install_name_tool有时无法改变rpath
  9. LINUX用C建立多级目录(测试通过)
  10. 软件基本功:重构工作的考虑及执行