1.将下载好的jquery.min.js,jquery.liMarquee.js在index.html引入,
2.自定义directive,这里以向左滚动为例,因为自己项目中还需要点击暂停,再次点击继续滚动功能。所以加了个num
.directive('marqueeLeft',[function(){
return {
link: function(scope,element,attrs,ctrl){
var marqueeLeft = $(element).liMarquee({circular:false});
var num=0
element.bind('click', function(){
num++
if(num%2 == 0){
marqueeLeft.liMarquee('play');
}else{
marqueeLeft.liMarquee('pause');
}
});
},
restrict:'A'
}
}]);
3.html,controller使用
//<div marquee-left >{{title}}</div> 原来是用的双向数据绑定的滚动文字,但是第一次往左滚动后会弹回,第二次才正常,百思不得其解,无奈水平有限,最后不得不在controller中使用juqery,效果还是很理想的。就是不知道会不会出乱子......
$scope.title = "在线人数 :6767在线人数 :6767在线人数 :6767在线人数Thank you for not eating my delicious ice cream cone ";
$('#marquee-left').text($scope.title)
<div marquee-left id="marquee-left"></div>