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)
        }
    }
}])

效果就是无缝衔接，一直向上滚动。