angularJs单行向上滚动公告

定义指令

 .directive("slideFollow", function ($timeout) {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                id: "@",
                datasetData: "="
            },
            template: "<li ng-repeat = 'data in datasetData'>{{data.option}}</li>",
            link: function (scope, elem, attrs) {
                $timeout(function () {
                    var className = $("." + $(elem).parent()[0].className);
                    className.css("margin-top", "-20px");
                    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, 3000);

                    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", "0");
                        }
                    }


                }, 500)

            }
        }
    })

使用指令

<ul class="slideUl" id="scrollWrap">
                        <!-- 指令 -->
      <slide-follow id="slide" dataset-data="datasetData">
</slide-follow>
</ul>

定义数据

        // 数据可以根据自己使用情况更换
        $scope.datasetData = [
            { option: "恭喜：183****获得1元代金劵" },
            { option: "恭喜：183****获得2元代金劵" },
            { option: "恭喜：183**** 获得3元代金劵" },
            { option: "恭喜：183**** 获得4元代金劵" },
            { option: "恭喜：183**** 获得5元代金劵" },
            { option: "恭喜：183**** 获得6元代金劵" }
        ]