详解在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表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
AngularJS快速入门
Apr 02 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
js实现扫雷源代码
Nov 27 Javascript
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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
php 静态化实现代码
2009/03/20 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
浅析PHP Socket技术
2013/08/02 PHP
培养自己的php编码规范
2015/09/28 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
基于javascript实现简单计算器功能
2016/01/03 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
Python映射拆分操作符用法实例
2015/05/19 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
海洋科学专业求职信
2014/08/10 职场文书
先进工作者申报材料
2014/12/23 职场文书
谢师宴家长致辞
2015/07/27 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
JAVA springCloud项目搭建流程
2022/05/11 Java/Android