详解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 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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中获取url与物理路径的总结
2013/06/21 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
php微信开发接入
2016/08/27 PHP
PHP实现图片压缩
2020/09/09 PHP
PHP xpath()函数讲解
2019/02/11 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python函数参数操作详解
2018/08/03 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
浅谈Python中的字符串
2020/06/10 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
超市中秋节活动方案
2014/02/12 职场文书
篮球社团活动总结
2014/06/27 职场文书
社会工作专业求职信
2014/07/15 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书