詳解AngularJS ui-sref的簡(jiǎn)單使用
此篇關(guān)于AngularJS ui-sref的簡(jiǎn)單使用，最近剛好學(xué)習(xí)，就順便發(fā)到隨筆上了
具體用法：
<a ui-sref="man">男人</a>
這是一個(gè)非常簡(jiǎn)單的ui-sref的使用，當(dāng)JavaScript重新生成網(wǎng)頁(yè)時(shí)，它會(huì)查找$state中名為“man”的state，讀取這個(gè)state的url，然后在a標(biāo)簽里生成href="url" rel="external nofollow" ，
結(jié)果為： <a ui-sref="man" href="#/man.html" rel="external nofollow" >男人</a>
但如果，你在創(chuàng)建一個(gè)導(dǎo)航控制器，里面有一個(gè)導(dǎo)航item的數(shù)組：
$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不支持動(dòng)態(tài)綁定，這樣的代碼會(huì)報(bào)錯(cuò)。sref中你只能使用state名，頂多加點(diǎn)參數(shù)。
這樣的話，你只能放棄sref，用回href綁定，你可以用$state.href來(lái)讀取state的url。
下面簡(jiǎn)單介紹下ui-sref參數(shù)的傳遞
頁(yè)面寫(xiě)法如下
<a ui-sref="man({id:1,name:2})" >按鈕</a>
路由里面配置：
$stateProvider.state('man', {
url: '/man.html?id&name', //參數(shù)必須先在這邊聲明
templateUrl: '../man.html',
})
點(diǎn)擊連接后，瀏覽器的地址則會(huì)變?yōu)椋?man.html/id=1&name=2
或者也可以這樣
$stateProvider.state('man', {
url: '/man.html',
templateUrl: '../man.html',
params: {'id': null,'name':null},//參數(shù)在這邊聲明
})
然后在對(duì)應(yīng)的controller里面通過(guò)$stateParams取值：$stateParams.id,$stateParams.name
其實(shí)ui-sref和$state.go本質(zhì)上是一個(gè)東西，可以看看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);
});
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
![angular報(bào)錯(cuò)can't resolve all parameters for []的解決](http://img.jbzj.com/images/xgimg/bcimg0.png)
angular報(bào)錯(cuò)can't resolve all parameters&nb
這篇文章主要介紹了angular報(bào)錯(cuò)can't resolve all parameters for []的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
不知道大家有沒(méi)有發(fā)現(xiàn)在用AngularJS作為前端搭建個(gè)人博客的時(shí)候，發(fā)現(xiàn)用AngularJs輸出html的時(shí)候，瀏覽器并不解析這些html標(biāo)簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實(shí)現(xiàn)這種功能的通過(guò)這篇文章來(lái)看看吧。2016-09-09
分享Angular http interceptors 攔截器使用(推薦)
AngularJS 是一個(gè) JavaScript 框架。它可通過(guò) <script> 標(biāo)簽添加到 HTML 頁(yè)面。這篇文章主要介紹了分享Angular http interceptors 攔截器使用(推薦),需要的朋友可以參考下2019-11-11
這篇文章主要介紹了AngularJS中指令的四種基本形式,結(jié)合實(shí)例形式分析了AngularJS指令的定義、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
單頁(yè)應(yīng)用中，組件時(shí)構(gòu)建應(yīng)用的基礎(chǔ)元素，頁(yè)面展示什么內(nèi)容均是靠頁(yè)面有什么組件決定的，而展示什么組件又是由一組路由（帶有Url元素的特定集合，可用于導(dǎo)航視圖）決定的，希望本文可以幫助讀者了解路由的基礎(chǔ)概念和基礎(chǔ)使用、寫(xiě)法。2021-05-05
本文通過(guò)示例向大家介紹了AngularJS語(yǔ)法的使用，小伙伴們認(rèn)真研讀下吧，非常的實(shí)用哦。2015-01-01
利用Angular2 + Ionic3開(kāi)發(fā)IOS應(yīng)用實(shí)例教程
這篇文章主要給大家介紹了關(guān)于利用Angular2 + Ionic3開(kāi)發(fā)IOS應(yīng)用的相關(guān)資料，文中通過(guò)示例代碼和圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
如果你正在構(gòu)建一個(gè)使用 API 的應(yīng)用程序,你會(huì)想在開(kāi)發(fā)過(guò)程中使用測(cè)試環(huán)境的 API 密鑰,而在生產(chǎn)環(huán)境中使用生產(chǎn)環(huán)境的 API 密鑰,在本教程中,你將學(xué)習(xí)如何在 Angular 中使用環(huán)境變量,需要的朋友可以參考下2024-02-02
Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例
這篇文章主要介紹了Angular JS數(shù)據(jù)的雙向綁定詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-12-12
vue更新到2.0之后，作者就宣告不再對(duì)vue-resource更新，而是推薦的axios，所以下面這篇文章主要給大家分享了關(guān)于使用axios的一些心得技巧，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07