html：
<ion-view view-title="Chats">
<ion-content>
<style>
*{margin: 0px;padding: 0px;}
.slide {width: 200px;height:50px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}//加粗的height可以修改高度，现在每次滚动仅显示一条广告。
.slide li {height: 49px;line-height: 49px;text-align: left;padding: 0 10px;font-size: 16px;list-style: none;border-bottom: 1px dashed #dcdcdc;cursor: pointer;}
.slide li:hover{background: #ccc;}
</style>
<div class="slide">
<ul class="slideUl">
<li ng-repeat = 'data in datasetData'>{{data.option}}</li>//指令
</ul>
</div>
</ion-content>
</ion-view>
angularjs：
.controller('ChatsCtrl', function($scope, $timeout,Chats) {
// 数据可以根据自己使用情况更换
$scope.datasetData = [
{option : "这个是第一条数据"},
{option : "这个是第二条数据"},
{option : "这个是第三条数据"},
{option : "这个是第四条数据"},
{option : "这个是第五条数据"},
{option : "这个是第六条数据"}
]
myxiaolaba();
function myxiaolaba(){
$timeout(function(){
var className = $('.slideUl');
var i = 0,sh;
var liLength = className.children("li").length;
var liHeight = className.children("li").height() + parseInt(className.children("li").css('border-bottom-width'));
className.html(className.html() + className.html());
// 开启定时器
sh = setInterval(slide,1000);//1000毫秒滚动一次
function slide(){
if (parseInt(className.css("margin-top")) > (-liLength * liHeight)) {
i++;
className.animate({
marginTop : -liHeight * i + "px"
},"slow");
} else {
i = 0;
className.css("margin-top","0px");
}
}
// 清除定时器
className.hover(function(){
clearInterval(sh);
},function(){
clearInterval(sh);
sh = setInterval(slide,1000);
})
},0)
}
})
当然还有别的写法，若要使用directive，可参考这个，
