【ionic框架bug】slidebox在使用model或popover后width变为0的解决方案

#【ionic框架bug】slidebox在使用model或popover后width变为0的解决方案javascript

##问题描述java

若是在silideBox上使用缓存，那么在进入另外一个state以后，打开一个Popover或者一个Modal，再返回原来的页面，则slideBox的width变为0，即看不见silideBox的内容了。git

#解决方案 ###一.使用ng-if 即不使用缓存，可是这样的弊端就是没有缓存-.-，其实原理就是每次从新渲染slidebox。github

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

在每次进入页面的时候执行此方法，会让slideBox从新计算宽度和高度。判断进入页面的方法能够是监听$ionicView.enter或者$stateChangeSuccess，建议后者，其中封装的有stateFrom、stateTo等方法方便判断页面的跳转，而且反应较前者快不少。框架

###三.修改ionic源码（建议）ionic

为何说这个是ionic的框架bug，就是由于它的源码写的有缺陷，致使一些莫名其妙的问题。因此打开ionic.bundle.js查看它的源码（只展现一开始的一部分）：ide

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的方法里面加了一个打印语句，看他在什么时间会执行这个方法。oop

      测试期间，发现每当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