Angular中$state.go頁面跳轉(zhuǎn)并傳遞參數(shù)的方法
遇到一個(gè)頁面跳轉(zhuǎn)的時(shí)候，在跳轉(zhuǎn)后的頁面獲取跳轉(zhuǎn)前頁面的數(shù)據(jù),我想到用一種是localstorage，一種用broadcast和on，然后老大說不用這么麻煩，既然都$state.go了直接帶參數(shù)，這次就介紹一下$state.go頁面跳轉(zhuǎn)傳遞參數(shù)。
1.路由頁面（注意這里要在路由上添加一個(gè)參數(shù)用于傳遞數(shù)據(jù)，不然在頁面跳轉(zhuǎn)的時(shí)候會(huì)filter）
.state("home.workpiece",{ // 跳轉(zhuǎn)前的頁面
url:"/workpiece",
views: {
home: {
templateUrl: prefix + "project/workpiece.html",
controller: "workpieceCtrl"
}
}
})
.state("home.workpieceDetail",{ //跳轉(zhuǎn)后的頁面
url:"/workpieceDetail?workpieceList",
views: {
home: {
templateUrl: prefix + "project/workpiece_detail.html",
controller: "workpieceDetailCtrl"
}
}
})
也可以將參數(shù)放在params中
.state("home.workpieceDetail",{
url:"/workpieceDetail",
views: {
home: {
templateUrl: prefix + "project/workpiece_detail.html",
controller: "workpieceDetailCtrl"
}
}，
params: {workpieceList:null}
})
2.在workpieceCtrl中
3.workpieceDetailCtrl中
這樣就可以將在頁面跳轉(zhuǎn)的時(shí)候傳遞數(shù)據(jù)了。希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 老生常談angularjs中的$state.go
- 詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)
- Angular Renderer (渲染器)的具體使用
- 監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例
- 使用Angular CDK實(shí)現(xiàn)一個(gè)Service彈出Toast組件功能
- Angular?服務(wù)器端渲染應(yīng)用常見的內(nèi)存泄漏問題小結(jié)
- JS?Angular?服務(wù)器端渲染應(yīng)用設(shè)置渲染超時(shí)時(shí)間???????
- Angular?服務(wù)器端渲染緩存功能問題
- 使用?Angular?服務(wù)器端渲染?Transfer?State?Service
相關(guān)文章
在 Angular6 中使用 HTTP 請(qǐng)求服務(wù)端數(shù)據(jù)的步驟詳解
本文分步驟給大家介紹了在 Angular6 中使用 HTTP 請(qǐng)求服務(wù)端數(shù)據(jù)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個(gè)核心概念，但是有時(shí)候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說明的相關(guān)資料,需要的朋友可以參考下2016-08-08
這篇文章主要給大家介紹了在Angular2下使用pdf插件的方法，使用這個(gè)插件是要實(shí)現(xiàn)一個(gè)pdf顯示的功能，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解
本篇文章主要介紹了AngularJS1.X學(xué)習(xí)筆記2-數(shù)據(jù)綁定詳解，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-04-04
詳解angularJs中自定義directive的數(shù)據(jù)交互
這篇文章主要介紹了詳解angularJs中自定義directive的數(shù)據(jù)交互，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
詳解Angular之constructor和ngOnInit差異及適用場(chǎng)景
這篇文章主要介紹了詳解Angular之constructor和ngOnInit差異及適用場(chǎng)景的相關(guān)資料,有興趣的可以了解一下2017-06-06
Angularjs實(shí)現(xiàn)控制器之間通信方式實(shí)例總結(jié)
這篇文章主要介紹了Angularjs實(shí)現(xiàn)控制器之間通信方式,結(jié)合實(shí)例形式總結(jié)分析了AngularJS控制器常用通信方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-03-03
基于AngularJS拖拽插件ngDraggable.js實(shí)現(xiàn)拖拽排序功能
ngDraggable.js是一款比較簡(jiǎn)單實(shí)用的angularJS拖拽插件，借助于封裝好的一些自定義指令，能夠快速的進(jìn)行一些拖拽應(yīng)用開發(fā)。本文先從基本概念入手，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-04-04
本篇文章主要介紹了Angular4 ElementRef的應(yīng)用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了angular中的默認(rèn)路由的用法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02