快捷導航

Angular 頁面跳轉(zhuǎn)時傳參問題

更新時間：2016年08月01日 10:40:07 作者：lvyi

這篇文章主要介紹了Angular 頁面跳轉(zhuǎn)時傳參問題的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

首先，你需要已經(jīng)配置過你的rout，比如：

$stateProvider
.state('firstPage',{
url:'/Page/firstPage',
templateUrl: 'Page/views/firstPage.html',
controller: 'firstPageCtrl'
//dependencies: ['service/vipSeachService']
})
.state('secPage', {　　　　　　　　　params:{'message':null},
url: '/Page/secPage',
templateUrl: 'Page/views/secPage.html',
controller: 'secPageCtrl'
})

其中注意第二個地址信息中的params屬性，這個就是你要接受參數(shù)的對象，以key ：value的形式定義

而在跳轉(zhuǎn)頁面時，兩個方法都可以傳參，一種是直接寫在html中

<a ui-sref="sec-page">跳轉(zhuǎn)第二頁</a>

此時傳參跟在頁面地址的后面

<a ui-sref="sec-page（{message:messageId}）">跳轉(zhuǎn)第二頁</a>

第二種就是寫在controller中

.controller('firstPageCtrl', function($scope, $state) { 　
$state.go('secPage'); });

同樣參數(shù)寫在地址后面，以對象的形式

.controller('firstPageCtrl', function($scope, $state) {
　　$state.go('secPage'，{message:messageId}); 
});

傳過去的參數(shù)，需要在目標頁面的controller中用$stateParams接收，改方法需要提前注入

.controller('secPageCtrl', function($scope, $state,$stateParams) {
　　var test=$stateParams.message;
});

以上所述是小編給大家介紹的Angular 頁面跳轉(zhuǎn)時傳參問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JS 數(shù)組隨機洗牌的實例代碼
這篇文章主要介紹了js 數(shù)組隨機洗牌的實例代碼，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2018-09-09
JS獲取CSS樣式（style/getComputedStyle/currentStyle）
這篇文章主要為大家介紹了JS獲取CSS樣式的方法，介紹了CSS樣式的三種分類情況，對獲取樣式做一個簡單的封裝，感興趣的小伙伴們可以參考一下
2016-01-01
Bootstrap告警框（alert）實現(xiàn)彈出效果和短暫顯示后上浮消失的示例代碼
這篇文章主要介紹了Bootstrap告警框（alert）實現(xiàn)彈出效果和短暫顯示后上浮消失，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-08-08
Javascript 檢測鍵盤按鍵信息及鍵碼值對應(yīng)介紹
Javascript中有3個事件句柄在對應(yīng)鍵盤的輸入狀態(tài):按鍵被按下（按下按鍵但還沒有抬起）、點擊按鍵（按下并抬起按鍵）、按鍵抬起（按鍵抬起之后）,接下來詳細介紹，感興趣的朋友可以了解下
2013-01-01
seajs和requirejs模塊化簡單案例分析
這篇文章主要介紹了seajs和requirejs模塊化,結(jié)合具體案例形式分析了seaj和requirejs模塊化應(yīng)用的相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下
2019-08-08
JavaScript中BOM對象原理與用法分析
這篇文章主要介紹了JavaScript中BOM對象原理與用法,,結(jié)合實例形式分析了javascript中BOM瀏覽器對象模型相關(guān)概念、原理、用法及相關(guān)操作注意事項,需要的朋友可以參考下
2019-07-07
uniapp開發(fā)小程序的經(jīng)驗總結(jié)
這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)小程序的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
javascript 實現(xiàn)動態(tài)側(cè)邊欄實例詳解
這篇文章主要介紹了javascript 實現(xiàn)動態(tài)側(cè)邊欄實例詳解的相關(guān)資料,并附實例代碼，幫助大家學習理解，需要的朋友可以參考下
2016-11-11
詳解如何讓InstantClick兼容MathJax、百度統(tǒng)計等
本篇文章主要介紹了如何讓InstantClick兼容MathJax、百度統(tǒng)計等，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
JS+CSS實現(xiàn)下拉列表框美化效果（3款）
這篇文章主要介紹了JS+CSS實現(xiàn)美化的下拉列表框效果,涉及javascript針對下拉列表框樣式的相關(guān)操作技巧,三款下拉菜單簡單大方,需要的朋友可以參考下
2015-08-08