快捷導(dǎo)航

Angular中$state.go頁(yè)面跳轉(zhuǎn)并傳遞參數(shù)的方法

更新時(shí)間：2017年05月09日 08:46:20 作者：Jiaen188

這篇文章主要介紹了angular中$state.go頁(yè)面跳轉(zhuǎn)并傳遞參數(shù)的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

遇到一個(gè)頁(yè)面跳轉(zhuǎn)的時(shí)候，在跳轉(zhuǎn)后的頁(yè)面獲取跳轉(zhuǎn)前頁(yè)面的數(shù)據(jù),我想到用一種是localstorage，一種用broadcast和on，然后老大說(shuō)不用這么麻煩，既然都$state.go了直接帶參數(shù)，這次就介紹一下$state.go頁(yè)面跳轉(zhuǎn)傳遞參數(shù)。

1.路由頁(yè)面（注意這里要在路由上添加一個(gè)參數(shù)用于傳遞數(shù)據(jù)，不然在頁(yè)面跳轉(zhuǎn)的時(shí)候會(huì)filter）

 .state("home.workpiece",{ // 跳轉(zhuǎn)前的頁(yè)面
   url:"/workpiece",
   views: {
    home: {
     templateUrl: prefix + "project/workpiece.html",
     controller: "workpieceCtrl"
    }
   }
  })
  .state("home.workpieceDetail",{  //跳轉(zhuǎn)后的頁(yè)面
   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中

這樣就可以將在頁(yè)面跳轉(zhuǎn)的時(shí)候傳遞數(shù)據(jù)了。希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

AngularJS基礎(chǔ) ng-click 指令示例代碼
本文介紹AngularJS ng-click 指令,這里整理了ng-click指令的基礎(chǔ)知識(shí)并且附有簡(jiǎn)單示例代碼和實(shí)現(xiàn)效果圖,有需要的小伙伴參考下
2016-08-08
Angular4中的checkbox?全選按鈕啟用禁用
這篇文章主要介紹了Angular4中的checkbox?全選按鈕啟用禁用的相關(guān)資料,需要的朋友可以參考下
2023-03-03
詳解Angular6.0使用路由步驟(共7步)
這篇文章主要介紹了詳解Angular6.0使用路由步驟(共7步)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
AngularJS基礎(chǔ)學(xué)習(xí)筆記之簡(jiǎn)單介紹
AngularJS 不僅僅是一個(gè)類庫(kù)，而是提供了一個(gè)完整的框架。它避免了您和多個(gè)類庫(kù)交互，需要熟悉多套接口的繁瑣工作。它由Google Chrome的開(kāi)發(fā)人員設(shè)計(jì)，引領(lǐng)著下一代Web應(yīng)用開(kāi)發(fā)。也許我們5年或10年后不會(huì)使用AngularJS，但是它的設(shè)計(jì)精髓將會(huì)一直被沿用。
2015-05-05
Angular實(shí)現(xiàn)的進(jìn)度條功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的進(jìn)度條功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了angular進(jìn)度條功能的相關(guān)界面布局、功能等操作技巧,需要的朋友可以參考下
2018-02-02
淺談Angular6的服務(wù)和依賴注入
這篇文章主要介紹了淺談Angular6的服務(wù)和依賴注入，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
AngularJS路由切換實(shí)現(xiàn)方法分析
這篇文章主要介紹了AngularJS路由切換實(shí)現(xiàn)方法,結(jié)合具體實(shí)例形式分析了AngularJS路由切換的實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-03-03
AngularJS基礎(chǔ) ng-keyup 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-keyup 指令,這里對(duì)ng-keyup指令的基本資料進(jìn)行了整理,并且附有代碼示例,有需要的朋友可以看一下
2016-08-08
AngularJS中的路由使用及實(shí)現(xiàn)代碼
本篇文章主要介紹了AngularJS中的路由使用及實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
舉例講解AngularJS中的模塊
這篇文章主要介紹了AngularJS中的模塊,文中講到了其應(yīng)用模塊和控制器模塊的例子,需要的朋友可以參考下
2015-06-06