1. 程式人生 > >Angular 緩存用父子路由 IOS下點擊下一個選項導致的頁面錯亂

Angular 緩存用父子路由 IOS下點擊下一個選項導致的頁面錯亂

輸入 property top 數據 when 圖片 last ast won

現象:

為了子頁面返回父頁面不刷新,需要用到子路由,如果沒有表單,完全是沒問題的,當父頁面有表單輸入,子頁面中也有表單輸入時,點擊鍵盤的下一項會把父頁面顯示出來,如下圖:

技術分享圖片

技術分享圖片

上圖中,是子路由界面,光表在最下行,當點擊鍵盤所標註的下一項時,會出現像下圖的現像,子頁面和父頁面同時出現。

解決辦法,當去子路由時,隱藏父路由,返回時再顯示。寫了一個全局的公用方法,如果有碰到相同問題,可以參考

/*加載數據顯示loading效果*/
        $rootScope.$on("$stateChangeSuccess", function(event, toState, toParams, fromState, fromParams) {
            
// to be used for back button //won‘t work when page is reloaded. var fromParent = fromState.name.substring(0, fromState.name.lastIndexOf(‘.‘)); var toParent = toState.name.substring(0, toState.name.lastIndexOf(‘.‘)); //父路由去子路由啟動loading,子路由返回到父路由時不啟動 if
(fromParent == toParent && (fromParent == ‘‘ || toParent == ‘‘) && typeof fromState.parent == ‘undefined‘ || fromParent.indexOf(toParent) == -1 && fromState.name.indexOf(toState.name) == -1 || fromState.name == toState.name || typeof
fromState.parent!=‘undefined‘ && fromState.parent != toState.name && toState.parent == fromState.name){ $rootScope.startLoading(); } /* * 解決進入子view時父層view也有輸入框時,在子view最後一個輸入框點擊下一項會彈出父層的bug * 以下變量是隱藏顯示父層時使用,變量為"子view名字"+View,例如,配置子view名字為sub,變量剛為subView * 在父層要隱藏顯示的地方用ng-show=‘!subView’ */ if(toState.views){ for(var key in toState.views){ if(toState.views.hasOwnProperty(key)){ $rootScope[ key +‘View‘] = true; } } } if(fromState.views){ for(var key in fromState.views){ if(fromState.views.hasOwnProperty(key)){ $rootScope[key +‘View‘] = false; } } } });

Angular 緩存用父子路由 IOS下點擊下一個選項導致的頁面錯亂