angularjs中使用swiper時不起做用，最後出現空白位

controller.js中定義swipers指令：

var moduleCtrl = angular.module('newscontroller',['infinite-scroll','ngTouch','news.service'])
.directive('swipers',swipers);
swipers.$inject = ['$timeout'];
function swipers($timeout) {
    return {
        restrict: "EA",
        scope: {
            data:"="
        },
        template: '<div class="swiper-container" ng-if="data.dlfList.length>0" id="swiper-container1">'+
                        '<div class="swiper-wrapper">'+
                        '<div class="swiper-slide" ng-repeat="swiperList in data.dlfList">'+
                        '<a ng-href="{{swiperList.isLink}}" ng-if="swiperList.classify==\'zt\'">'+
                        '<div class="img-wrap">'+
                        '<img ng-src="{{swiperList.picture}}" alt="{{swiperList.title}}" class="thumbpic">'+
                        '</div><div class="dl_font_title dl_font_title_swiper" ng-bind="swiperList.title"></div>'+
                        '<div class="source" ng-bind="swiperList.source"></div></a>' + 
                        '<a ng-if="swiperList.classify!=\'zt\'" ng-click="newsDetail(swiperList.id,swiperList.classify,swiperList.pubtime)">'+
                        '<div class="img-wrap"><img ng-src="{{swiperList.picture}}" alt="{{swiperList.title}}" class="thumbpic">'+
                        '<div class="numWrap" ng-if="swiperList.classify==\'pic\'">'+
                        '<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/mnapp/img/num.png">'+
                        '<div class="swiper-num" ng-bind="swiperList.picCount"></div></div>'+
                        '<div class="numWrap" ng-if="swiperList.classify==\'zb\'">'+
                        '<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/img/live.png"></div>'+
                        '<div class="numWrap" ng-if="swiperList.classify==\'zy\'">'+
                        '<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/mnapp/img/num.png">'+
                        '<div class="swiper-num">專題</div></div></div>'+
                        '<div class="dl_font_title dl_font_title_swiper" ng-bind="swiperList.title"></div>'+
                        '<div class="source" ng-bind="swiperList.source"></div></a>'+
                        '</div></div></div>',
        link: function(scope, element, attrs) {
            if(scope.$last){//最後一個循環項加載完成後初始化
              $timeout(function(){
                var swiper = new Swiper('.swiper-container', {   //輪播圖綁定樣式名
                    slidesPerView: 'auto',
                    spaceBetween: 10
                });  
              },100); 
           }
        }
    };
}

index.html中使用swipers指令：

<!-- swipers指令start -->
                                        <swipers data="yws"></swipers>
                                        <!-- swipers指令end -->

 

開發過程當中的遇到的問題：
一、點擊除「要聞」外的欄目，再點擊「要聞」，多連發滾動不起做用；
二、向下滾動要聞列表後再向上滾動時多連發滾動不起做用（緣由：向上滾動時從新請求了接口）
解決方法：將此處功能封裝成一個指令，使用指令解決了以上2個問題

 此處滑動到最後會出現一個空白位

解決方法：

spaceBetween: 10

去掉此屬性，循環項之間的距離使用css控制便可。