angular中的無縫向上滾動效果

html代碼如下：

<div class="slide">
	 <ul class="slide-ul">
		<demo-slide-follow id="slide1" dataset-data = "data"></demo-slide-follow>
	</ul>
</div>

css代碼如下：

.slide{
	height:60px;
	overflow:hidden;
}

js代碼如下：

$scope.data= [{
	name:'張三',
	sex:'男',
	age:20
},{
	name:'李四',
	sex:'男',
	age:22
},{
	name:'王五',
	sex:'男',
	age:23
},{
	name:'趙六',
	sex:'男',
	age:24
}]

指令如下：

app.directive("demoSlideFollow" , ['$timeout',function($timeout){
    return {
        restrict : 'E',
        replace : true,
        scope : {
            id : "@",
            datasetData : "="
        },
        template : "<li ng-repeat = 'data in datasetData'>{{data.name}}--{{data.sex}}--{{data.age}}</li>",
        link : function(scope,elem,attrs) {
            $timeout(function(){
            	//獲取父元素容器
                var parent= $("." + $(elem).parent()[0].className);
                var i = 0;
                //獲取子元素的個數
                var liLength = parent.children("li").length;
                //獲取每個子元素的高度
                var liHeight = parent.children("li").height();
                //防止滾動出現斷層，將元素複製一遍，實現銜接
                parent.html(parent.html() + parent.html());

                // 1秒後開啓滾動
                $timeout(function(){
                    slide();
                },1000)
                
                function slide(){
                    if (parseInt(parent.css("margin-top")) > (-liLength * liHeight)) {
                        i++;
                        parent.animate({
                            marginTop : -liHeight * i + "px"
                        },1500,'linear',function(){
                            slide();
                        });
                    } else {
                        i = 0;
                        parent.css("margin-top","0px");//位置復原
                        slide();
                    }
                }
            },0)
        }
    }
}])

效果就是無縫銜接，一直向上滾動。