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

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

##問題描述

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

#解決方案 ###一.使用ng-if 即不使用緩存，可是這樣的弊端就是沒有緩存-.-，其實原理就是每次從新渲染slidebox。

###二.使用$ionicSlideBoxDelegate.update()

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

###三.修改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打開的時候，這個方法都會執行兩次（緣由不明），代碼中：<font color=red>container返回的是整個slider的HTML代碼片斷，當他在頁面中可見的時候，它的可見寬度大於0，反之爲0，因此在咱們跳轉至其餘頁面的時候，它的可見寬度即變爲0，這個時候咱們只要阻止它改變當前的狀態便可，因此加上return，這樣問題就解決啦。</font>

###四.直接引入修改好的js片斷，覆蓋原來的slidebox代碼

須要注意的是，在index頁面的引入順序，sliderView.js必定要在ionic.bundle.js以後引入，這樣才能實現覆蓋。

下載連接https://github.com/SimonZhangITer/ionic_slidebox/blob/master/slidebox.js