詳解angularjs跨頁面?zhèn)鲄⒂龅降囊恍﹩栴}
上周寫課程選擇時間功能時需要將課程ID,星期,節(jié)次等參數(shù)傳遞給下一個頁面,就查了查angularjs的ui-router跨頁面?zhèn)鲄?,一開始是這樣寫的:
在app.js下添加 params:{'args':{}}

然后在起始頁面的控制器中使用transtionTo或者go方法傳遞參數(shù)

最后在目標(biāo)頁面的控制器使用$stateParams接收參數(shù),如下圖,可知我需要傳輸?shù)膮?shù)都傳了過來

這樣傳參的好處就是方便靈活,但有一個不好的地方就是每次刷新完以后傳遞過來的參數(shù)都會丟失,是所以我最后放棄了這種寫法,改成了傳統(tǒng)的url傳參,如下圖:

這樣一來就每次刷新就不會丟失數(shù)據(jù)了,因為參數(shù)都存到了路徑當(dāng)中,但接下來就發(fā)生了一個比較詭異的事情:
我明明已經(jīng)給$scope.week賦了值,而且控制臺確實打印了出來,而我再打印一次$scope時卻發(fā)現(xiàn)$scope.week根本沒有被賦值,如下圖:

我覺得這不是我能力范圍之內(nèi)能解決的問題了,便請求了張喜碩學(xué)長,學(xué)長試了各種方法,最后無奈將我控制器里所有其他的代碼都注釋掉,只保留上述代碼,依然無法解決,最后查看v層排錯,才找到了萬惡之源,原來是我用了ng-value,只要將ng-value改成value,問題就正常解決了。

總結(jié)
通過這次遇到的問題反映出我解決問題的能力還是不夠,一旦遇到非常奇怪的bug就手足無措,不知道該怎么排查錯誤。再不濟也可以把我改動過的代碼注釋一半留一半,總是能找到問題的源頭的。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular事件之不同組件間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了Angular事件之不同組件間傳遞數(shù)據(jù)的方法,利用Angular Event在不同組件之間傳遞數(shù)據(jù),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11
angular4應(yīng)用中輸入的最小值和最大值的方法
這篇文章主要介紹了angular4應(yīng)用中輸入的最小值和最大值的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Angularjs的$http異步刪除數(shù)據(jù)詳解及實例
這篇文章主要介紹了Angularjs的$http異步刪除數(shù)據(jù)詳解及實例的相關(guān)資料,這里提供實現(xiàn)思路及實現(xiàn)具體的方法,需要的朋友可以參考下2017-07-07
AngularJS基礎(chǔ) ng-submit 指令簡單示例
本文主要介紹AngularJS ng-submit 指令,這里對ng-submit 指令的基礎(chǔ)資料做了詳細介紹整理,并附有代碼示例,有需要的小伙伴可以參考下2016-08-08
AngularJS入門教程之學(xué)習(xí)環(huán)境搭建
這篇文章主要介紹了AngularJS入門教程之學(xué)習(xí)環(huán)境搭建,本教程將指導(dǎo)您完成一個簡單的應(yīng)用程序創(chuàng)建過程,包括編寫和運行單元測試、不斷地測試應(yīng)用,需要的朋友可以參考下2014-12-12
AngularJS實現(xiàn)單獨作用域內(nèi)的數(shù)據(jù)操作
這篇文章給大家介紹了利用AngularJs如何實現(xiàn)ng-repeat內(nèi)各個小的子作用域單獨數(shù)據(jù)綁定。有需要的小伙伴們可以參考借鑒,下面來一起看看吧。2016-09-09
Angular.js自定義指令學(xué)習(xí)筆記實例
這篇文章主要介紹了Angular.js自定義指令的實例代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-02-02

