详解在Angularjs中ui-sref和$state.go如何传递参数


Posted in Javascript onApril 24, 2017

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 如何传递参数

首先,要在目标页面定义接受的参数:

详解在Angularjs中ui-sref和$state.go如何传递参数

传参,

ui-sref:

详解在Angularjs中ui-sref和$state.go如何传递参数

$state.go:

详解在Angularjs中ui-sref和$state.go如何传递参数

接收参数,

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

详解在Angularjs中ui-sref和$state.go如何传递参数

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的web页面日期格式化插件
Nov 15 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 #Javascript
angular中实现控制器之间传递参数的方式
Apr 24 #Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 #Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 #Javascript
JS简单获取日期相差天数的方法
Apr 24 #Javascript
Angular.js中控制器之间的传值详解
Apr 24 #Javascript
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
python操作xml文件示例
2014/04/07 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
python逆向入门教程
2018/01/15 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python3实现名片管理系统
2020/11/29 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
总经理岗位职责描述
2014/02/08 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
2014年班主任工作总结
2014/11/08 职场文书
毕业生对母校寄语
2015/02/26 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js