html标签 ui-sref,详解AngularJS ui-sref的简单使用

悠悠 2022-10-07 04:45 37阅读 0赞

![5268f80b9b1e01f982625ef6fac83ca1.png][]

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

具体用法：

男人

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

结果为： 男人

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

$scope.items = \[

\{state: "man", statePage: "man.html"\},

\{state: "womanMe", statePage: "woman.html"\}

\]

然后在html中使用repeat：

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

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

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

页面写法如下

按钮

路由里面配置：

$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);

\});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

![1428d0e076c3959ab11d28a39bc84fab.png][]

![5268f80b9b1e01f982625ef6fac83ca1.png][]

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

[5268f80b9b1e01f982625ef6fac83ca1.png]: /images/20221005/d0cfab3310de4ad4ba332fffebe2caa9.png
[1428d0e076c3959ab11d28a39bc84fab.png]: /images/20221005/687e1253713240ffa4529a18292579a3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，37人围观）

还没有评论，来说两句吧...

相关阅读

相关 ⑮HTML5 音视频标签的简单使用，状态标签，列表标签

Html5 音频 & 视频 H5中对音视频的设计初次使用音视频兼容性写法音视频js相关属性音视频

ゞ浴缸里的玫瑰/ 2023年02月15日 07:57/ 0 赞/ 189 阅读

相关 html标签 ui-sref,详解AngularJS ui-sref的简单使用

![5268f80b9b1e01f982625ef6fac83ca1.png][] 此篇关于AngularJS ui-sref的简单使用，最近刚好学习，就顺便发到随笔上了

悠悠/ 2022年10月07日 04:45/ 0 赞/ 38 阅读

相关 html标签的简单介绍和使用3

1.列表 <dl>  <dt>hello world</dt> <!--

我会带着你远行/ 2022年08月03日 08:44/ 0 赞/ 121 阅读

相关 html标签的简单介绍和使用2

表单的简单应用效果 ![这里写图片描述][20150804102553281] html代码 <html> <head>

喜欢ヅ旅行/ 2022年08月03日 08:43/ 0 赞/ 135 阅读

相关 html标签的简单介绍和使用1

最为简单的html页面所需要的一些标签 <html>  <head>

深碍√TFBOYSˉ_/ 2022年08月03日 08:27/ 0 赞/ 121 阅读

相关 angularJS 使HTML解释JS字符串中的标签。

在augularJS中，某一个字符串含有标签，在显示的时候会直接把标签显示出来。 1. 首先在app.js中设置 filter('trustHtml', func

水深无声/ 2022年06月08日 14:39/ 0 赞/ 111 阅读

相关 HTML - 元素/标签详解

http://[blog.csdn.net/pipisorry/article/details/78928492][blog.csdn.net_pipisorry_articl

以你之姓@/ 2022年06月02日 01:25/ 0 赞/ 259 阅读

相关 AngularJs的简单使用

嗯额，刚刚上手了AngularJs,感觉功能很强大，做一个简单的入门笔记吧，新鲜出炉的,嘿嘿。首先我们要了解下什么是AngularJs: AngularJS 是一个 J

爱被打了一巴掌/ 2022年05月15日 10:51/ 0 赞/ 147 阅读

相关 HTML中的 meta 标签的使用详解

在我们制作的网页中，要是想让它能够让更多的人去访问，最好的方法就是通过搜索引擎来找到你的网址，于是需要你的网页可以有关键词能够让搜索引擎来识别，于是HTML中的标签就是这个功能

小鱼儿/ 2021年11月01日 21:46/ 0 赞/ 285 阅读

相关 HTML---a标签详解

前言 <a>标签定义超链接，用于从一张页面链接到另一张页面。 <a>元素最重要的属性是 href 属性，它指示链接的目标。指向 w3school 的超链接：

落日映苍穹つ/ 2021年09月14日 12:50/ 0 赞/ 436 阅读