详解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
Oct 31 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 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知识收集
2012/08/20 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
JQuery属性操作与循环用法示例
2019/05/15 jQuery
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python内置函数dir详解
2015/04/14 Python
wxPython中listbox用法实例详解
2015/06/01 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python 实现矩阵填充0的例子
2019/11/29 Python
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
内刊编辑求职自荐书范文
2014/02/19 职场文书
高中班主任评语大全
2014/04/25 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript