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