大话主席的TouchSlide插件短小精悍，各种效果也比较实用，非常适合用于移动端的项目。但是在基于angularjs的项目中，轮播的数据是从服务端获取的，需要从服务端拿到数据之后才能执行TouchSlide的方法，而且TouchSlide对于ng-repeat出来的数据极不友好，所以我偏不使用ng-repeat而直接append添加到DOM中，虽说有悖于angularjs的一些初衷，但是问题确实快速的解决了，哈哈，特此贴下代码记录一番，后期再逐渐优化更新。
效果预览：angularjs基于TouchSlide的触屏轮播
TouchSlide各种效果配置信息及下载详见：TouchSlide官网
html部分
<body ng-app="myApp">
<div ng-controller="testCtrl">
<div id="home-slider" class="home-slider" home-slider>
<div class="bd"><ul></ul></div>
<div class="hd"><ul></ul></div>
</div>
</div>
<script type="text/javascript" src="statics/js/angular.min.js"></script>
<script type="text/javascript" src="statics/js/TouchSlide.1.1.js"></script>
<script type="text/javascript" src="statics/app.js"></script>
</body>
css样式
.home-slider{position:relative;margin:.2rem auto 0;width:7.02rem;height:3rem;border-radius:4px;overflow:hidden;}
.home-slider .bd{position:relative;z-index:0;width:100%;height:100%;overflow:hidden}
.home-slider .bd ul li{height:3rem;}
.home-slider .bd ul li a{display:block;}
.home-slider .bd ul li img{display:block;width:100%;height:100%;}
.home-slider .hd{position:absolute;z-index:1;right:.4rem;bottom:.1rem}
.home-slider .hd ul li{display:inline-block;float:left;margin:0 .05rem;width:.12rem;height:.12rem;background:rgba(255,255,255,.8);line-height:2;overflow:hidden}
.home-slider .hd ul li.on{background:#eea430}
app.js
angular.module('myApp', [])
.service('apiService', ['$http', '$q', function($http, $q){
this.serverUrl = "";
//请求参数处理
this.handleParams = function(params){
params = params ? params : {};
params.t = new Date().getTime();
return params;
};
//get请求
this.c_get = function(api, params){
var deferred = $q.defer();
var allParams = this.handleParams(params);
var url = this.serverUrl + api;
$http.get(url, {params:allParams}).then(function successCallback(res){
if(res.data.code*1 === 666){
deferred.resolve(res.data);
}
},function errorCallback(res){
});
return deferred.promise;
};
this.homeSlider = function(params){
return this.c_get("demoApi.php",params);
};
}])
.factory('getSliderData',['$q','apiService', function($q,apiService){
return{
indexSlider: function(){
var deferred=$q.defer();
apiService.homeSlider({action:"getSlider",num:4}).then(function(res){
var sData = {list:"",config:""};
if(res.data.length > 0){
sData.list = res.data;
}else{
sData.list = [
{id:1,url:"#",img:"statics/images/1.jpg"}
];
}
sData.config = {slideCell:"#home-slider",titCell:".hd ul",mainCell:".bd ul",effect:"leftLoop",autoPlay:true,autoPage:true,delayTime:500,interTime:3000};
deferred.resolve(sData);
});
return deferred.promise;
}
}
}])
.directive('homeSlider',['getSliderData', function(getSliderData){
return {
restrict:'EA',
scope: true,
link:function(scope,element,attrs){
getSliderData.indexSlider().then(function(res){
var len = res.list.length;
var ulEle = angular.element(element.children()[0]).find('ul')[0];
for(var i=0;i<len;i++){
angular.element(ulEle).append('<li><a href="'+res.list[i].url+'"><img src="'+res.list[i].img+'"/></a></li>');
};
TouchSlide(res.config)
});
}
};
}])
.controller('testCtrl',['$scope', function($scope){
console.log("i am test home slider controller...")
}])
有朋自远方来...评论一下呗O(∩_∩)O