【ionic框架bug】slideBox在使用model或pop後width變爲0的解決方案

從新排版後的文章連接：https://my.oschina.net/keysITer/blog/749208

 

在項目中的日曆使用的是silideBox，可是最近在測試的時候發現一個框架BUG：

問題描述：

若是在silideBox上使用緩存，那麼在進入另外一個state以後，打開一個Popover或者一個Modal，再返回原來的頁面，則slideBox的width變爲0，即看不見silideBox的內容了。

解決方案：

1.使用ng-if

  即不使用緩存，可是這樣的弊端就是沒有緩存-.-。

2.使用$ionicSlideBoxDelegate.update()

在每次進入頁面的時候執行此方法，會讓slideBox從新計算寬度和高度。判斷進入頁面的方法能夠是監聽$ionicView.enter或者$stateChangeSuccess，建議後者，其中封裝的有stateFrom、stateTo等方法方便判斷頁面的跳轉，而且反應較前者快不少。

3.修改ionic源碼（建議）

爲何說這個是ionic的框架bug，就是由於它的源碼寫的有缺陷，致使一些莫名其妙的問題。因此打開ionic.bundle.js查看它的源碼（只展現一開始的一部分）：

ionic.views.Slider=ionic.views.View.inherit({

initialize:function(options){

varslider=this;

//utilities

varnoop=function(){};//simplenooperationfunction

varoffloadFn=function(fn){setTimeout(fn||noop,0);};//offloadafunctionsexecution

 

//checkbrowsercapabilities

varbrowser={

addEventListener:!!window.addEventListener,

touch:('ontouchstart'inwindow)||window.DocumentTouch&&documentinstanceofDocumentTouch,

transitions:(function(temp){

varprops=['transitionProperty','WebkitTransition','MozTransition','OTransition','msTransition'];

for(var i in props)if(temp.style[props[i]]!==undefined)returntrue;

return false;

})(document.createElement('swipe'))

};

var container=options.el;

//quitifnorootelement

if(!container)return;

var element=container.children[0];

var slides,slidePos,width,length;

options=options||{};

var index=parseInt(options.startSlide,10)||0;

var speed=options.speed||300;

options.continuous=options.continuous!==undefined?options.continuous:true;

 

function setup(){

//此爲添加的代碼

console.log('setup')

if(!container.offsetWidth){     return;

}

//此爲添加的代碼end

//cacheslides

slides=element.children;

length=slides.length;

 

閱讀源代碼後能夠發現，setup方法是slidebox的主方法，因此我在setup的方法裏面加了一個打印語句，看他在什麼時間會執行這個方法。

測試期間，發現每當popover或者modal打開的時候，這個方法都會執行兩次（緣由不明），代碼中：container返回的是整個slider的HTML代碼片斷，當他在頁面中可見的時候，它的可見寬度大於0，反之爲0，因此在咱們跳轉至其餘頁面的時候，它的可見寬度即變爲0，這個時候咱們只要阻止它改變當前的狀態便可，因此加上return，這樣問題就解決啦。

4.直接引入新的js，覆蓋原來的