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参数传递相关推荐
- Vue(小码哥王洪元)笔记06路由,url的hash,history,router-linke,路由跳转,动态路由,懒加载,路由嵌套,router参数传递,导航守卫
1.什么是路由 路由器提供了两种机制:路由和传送 路由:数据报从来源到目的地的路径 传输:将输入端的数据转移到合适的输出端 路由有一个非常重要的概念教路由表 路由表本质上就是一个映射表,决定了数据包的 ...
- AngularUI Router
UI-Router是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染,而不是仅仅的只改变路由(传统AngularJS应用实用的方式).该模块为开发者提供了很多视图(View ...
- 深入 AngularUI Router
翻译:深入 AngularUI Router 原文地址:http://www.ng-newsletter.com/posts/angular-ui-router.html ui-router: htt ...
- angular Tabs (ui.bootstrap.tabs)
1:引入基础文件搭建环境 <pre name="code" class="html"><link rel="stylesheet&q ...
- 《慕课React入门》总结
React 入门与实战 react组件 虚拟DOM的概念 这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
- AngularJS中ui-router全攻略
首先是angular-ui-router的基本用法. ■ 如何引用依赖angular-ui-router angular.module('app',["ui.router"]).c ...
- angularJS1.6.3个人理解(后续更新4.4.7)
AngularJS AngularJS基础 AngularJS简介 AngularJS是一个用于构建单页面应用的前端JS框架,在前端践行了MVC设计模式. AngularJS是一个前端JS框架,或者叫 ...
- AngularJs ui-router 路由的简单介绍
之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...
- AngularJS中ngRouter和uiRouter的区别
路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它自然也有内置的路由模块:做ngRoute. ...
- 面试题HTML +CSS
HTML+CSS部分 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者 ...
最新文章
- 番茄时间管理和四象限工作法完美搭配造就职场神器
- Sass学习笔记 -- 初步了解函数、运算、条件判断及循环
- php中pregmatch,php中preg_match的isU代表什么意思
- MySQL于ON DUPLICATE KEY UPDATE采用
- Leetcode -MySQL-178. 分数排名
- Python之math库
- popup弹出html页面,在页面加载时打开所有弹出窗口popup.html
- 【白皮书分享】2022年私域运营趋势及创业机会.pdf(附下载链接)
- Unity使用自定义资源(.asset)配置数据
- 《Android 源码设计模式解析与实战》— Android 书籍
- 一个Python 爬虫程序
- logistic映射图像加密matlab,基于Logistic映射与排序变换的图像加密算法
- qpushbutton设置居中_在右侧对齐图标并将文本居中放置在QPushButton中
- 简单又较隐蔽的PHP后门
- wordpress友联_WordPress如何添加友情链接
- 水平+垂直 居中的方法
- 全局函数的名字应当使用“动词”或者“动词+名词”(动宾词组)
- 音频信号耦合为何要用极性电容?如何选型?
- 全靠我啃烂了这份2021最新面试题!吊打面试官
- java第三次试验报告
热门文章
- python flask 分页_Python利用flask sqlalchemy实现分页效果
- 源码生成网站,开发帮助网站
- Django使用orm创建数据表字段常用命令
- undefined: resolver.BuildOption
- Win10安装python扩展的几种方式
- git log 查看自己修改的行数_Git 笔记 day2
- python使用长ping命令_在Python中调用Ping命令,批量IP的方法
- MACOS上install_name_tool有时无法改变rpath
- LINUX用C建立多级目录(测试通过)
- 软件基本功:重构工作的考虑及执行