详解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中String类的subString()方法和slice()方法
May 24 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php cookie 详解使用实例
2016/11/03 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
python调试神器PySnooper的使用
2019/07/03 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
部队学习十八大感言
2014/01/11 职场文书
市场拓展计划书
2014/05/03 职场文书
企业安全标语
2014/06/07 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers