Angular.js跨controller實現(xiàn)參數(shù)傳遞的兩種方法

更新時間：2017年02月20日 09:22:07 作者：xishiyi7

這篇文章主要給大家介紹了關(guān)于Angular.js跨controller實現(xiàn)參數(shù)傳遞的兩種方法，文中給出了詳細的介紹和示例代碼，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。

前言

由于controllers之間不共享scope，如果希望在controllers之間傳遞參數(shù)，可能需要通過其他的方式實現(xiàn)，以下是當(dāng)前我用到的兩種在controllers之間傳遞參數(shù)的方法。

注:參考文章Sharing Data Between Angular Controllers

一、service

可以寫一個包含get/set的service,取參數(shù)/賦參數(shù)

.factory('paramService',function(){
 return {
 result:[],
 getResult:function(){
 return this.result;
 },
 setResult:function(res){
 this.result = res;
 }
 };
})

然后可以在controllerOne中賦值,在controllerTwo中取值

// 賦值
.controller('one',function(paramService){
 paramService.setResult('one');
})

// 取值
.controller('two',function(paramService){
 var param = paramService.getResult();
})

二、$stateParams

第二種方法用于路由間傳遞參數(shù),用途也比較廣泛,使用場景比較多

// 傳參
.state('one',{
 url:'one',
 controller:'one',
 template:'one.html',
 params:{
 name:'john'
 }
})

// 取參
.controller('one',function($stateParams){
 var name = $stateParams.name;
})

others/localStorage

其他方法可以使用一些h5的小技巧,比如使用localStorage來存參/取參,其他的方法,暫時沒想到也沒用到,有待后續(xù)補充.

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Angular能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章:

相關(guān)文章

AngularJS入門教程（一）：靜態(tài)模板
這篇文章主要介紹了AngularJS入門教程（一）：靜態(tài)模板,本文是系列文章的第二篇,本系列會用一個項目來講解AngularJS的使用,需要的朋友可以參考下
2014-12-12
ANGULARJS中使用JQUERY分頁控件
本文給大家介紹ANGULARJS中使用JQUERY分頁控件，需要的朋友可以參考下
2015-09-09
Angularjs中$http以post請求通過消息體傳遞參數(shù)的實現(xiàn)方法
這篇文章主要介紹了Angularjs中$http以post請求通過消息體傳遞參數(shù)的方法,結(jié)合實例形式分析了$http使用post請求傳遞參數(shù)的相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下
2016-08-08
Angular.js前臺傳list數(shù)組由后臺spring MVC接收數(shù)組示例代碼
這篇文章主要給大家介紹了關(guān)于Angular.js前臺傳list數(shù)組之后，由后臺spring MVC接收數(shù)組的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
AngularJs每天學(xué)習(xí)之總體介紹
這篇文章主要為大家詳細介紹了Angularjs總體介紹及數(shù)據(jù)綁定部分內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
angularjs 中$apply，$digest，$watch詳解
這篇文章主要介紹了angularjs 中$apply，$digest，$watch詳解的相關(guān)資料,需要的朋友可以參考下
2016-10-10
angular中的cookie讀寫方法
本篇文章主要介紹了angular中的cookie讀寫方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
AngularJS入門之動畫
AngularJS中ngAnimate模塊支持動畫效果，但是ngAnimate模塊并未包含在AngularJS核心庫中，因此需要使用ngAnimate需要在定義Module時聲明對其的引用。下面通過本文我們來看看AngularJS動畫的詳細介紹。
2016-07-07
angular實現(xiàn)商品篩選功能
這篇文章主要為大家詳細介紹了angular實現(xiàn)商品篩選功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
Angular設(shè)置別名alias的方法
這篇文章主要介紹了Angular設(shè)置別名alias及打包命令的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11