详解AngularJS ui-sref的简单使用


Posted in Javascript onApril 24, 2017

此篇关于AngularJS ui-sref的简单使用,最近刚好学习,就顺便发到随笔上了

具体用法:

<a ui-sref="man">男人</a>

这是一个非常简单的ui-sref的使用,当JavaScript重新生成网页时,它会查找$state中名为“man”的state,读取这个state的url,然后在a标签里生成href="url" rel="external nofollow" ,

结果为: <a ui-sref="man" href="#/man.html" rel="external nofollow" >男人</a>

但如果,你在创建一个导航控制器,里面有一个导航item的数组:

$scope.items = [ 
 {state: "man", statePage: "man.html"}, 
 {state: "womanMe", statePage: "woman.html"} 
]

然后在html中使用repeat:

<li repeat="item in items"> 
<a ui-sref="{{item.statePage}}"><{{item.state}}</a> 
</li>

ui-sref不支持动态绑定,这样的代码会报错。sref中你只能使用state名,顶多加点参数。

这样的话,你只能放弃sref,用回href绑定,你可以用$state.href来读取state的url。

下面简单介绍下ui-sref参数的传递

页面写法如下

<a ui-sref="man({id:1,name:2})" >按钮</a>

路由里面配置:

$stateProvider.state('man', { 
  url: '/man.html?id&name',     //参数必须先在这边声明 
  templateUrl: '../man.html', 
})

点击连接后,浏览器的地址则会变为:/man.html/id=1&name=2

或者也可以这样

$stateProvider.state('man', { 
  url: '/man.html',      
  templateUrl: '../man.html', 
  params: {'id': null,'name':null},//参数在这边声明 
 
})

 然后在对应的controller里面通过$stateParams取值:$stateParams.id,$stateParams.name

其实ui-sref和$state.go本质上是一个东西,可以看看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); 
   });

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

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
理解javascript中的闭包
Jan 11 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 #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
You might like
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
详解webpack自动生成html页面
2017/06/29 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
使用python实现对元素的长截图功能
2019/11/14 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
python实现的分层随机抽样案例
2020/02/25 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
python 6行代码制作月历生成器
2020/09/18 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
实习自我评价怎么写
2013/12/02 职场文书
公司前台辞职报告
2014/01/19 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
单位介绍信格式
2015/01/31 职场文书
简历中自我评价范文
2015/03/11 职场文书
七年级作文之雪景
2019/11/18 职场文书