如何将 jQuery 函数转换为 Angular js？

Question

我对 AngularJs 很陌生，我在 jQuery 中编写了一个滑块功能。现在我想将 thih 函数转换为 Angular。下面是我的代码::

   <div class="slide-container">
        <div class="slide-scroller" style="left: 0px;">
            <div class="slideContent" style="background-color: #f00;">one</div>
            <div class="slideContent" style="background-color: #0f0;">two</div>
            <div class="slideContent" style="background-color: #00f;">three</div>
        </div>
    </div>
    <input type="button" id="left">
    <input type="button" id="right">

        .slide-container {height: 100px; overflow: hidden; position: relative;}
        .slide-scroller { height: 100px; overflow:hidden;  position: absolute; top: 0px;}
        .slide-scroller .slideContent { height: 100px; overflow: hidden; float: left;}

      function slider() {

           var slideWidth, speed, sc, slideScroller, scSlide, totalSlide, scrollerWidth, maxLeft;

           slideWidth = $(window).width();          // [ get the device width ]
           speed = 0.6;                             // [ control speed 1 = 1s] 
           sc = $(".slide-container");              // [ getting the container ]
           slideScroller = $('.slide-scroller');    // [ getting slider scroller ]
           scSlide = $('.slideContent');            // [ getting slide contetnts ]
           totalSlide = $(scSlide).length;          // [ total slide contents ]
           scrollerWidth = totalSlide * slideWidth; // [ slide scroller width ]

           maxLeft = -parseInt(scrollerWidth) + parseInt(slideWidth); // [maxmimum left slide value]

           // adding some initial attributes
            $(sc && scSlide).css({width: slideWidth});
            $(slideScroller).css({width: scrollerWidth});
            $(slideScroller).css('transition', 'all ease '+speed+'s');

            // left click function

            $("#left").click(function () {
                var xvalue = $(slideScroller).css('left'); //console.log('left :: ', xvalue);
                var newvalue = parseInt(xvalue) - parseInt(slideWidth); //  console.log('newValue :: ', newvalue);
                if (newvalue >= maxLeft) {//console.info('no more left left');                        
                    $(slideScroller).css('left', newvalue);
                }
                else {
                    return false;
                }
            });
            // right click function
            $("#right").click(function () {
                var xvaluetwo = $(slideScroller).css('left'); console.log('lefttwo :: ', xvaluetwo);
                var newvaluetwo = parseInt(xvaluetwo) + parseInt(slideWidth); console.log('newValuetwo :: ', newvaluetwo);
                if (newvaluetwo <= 0) {//console.info('no more right left');
                    $(slideScroller).css('left', newvaluetwo);
                }
                else {
                    return false;
                }
            });
        }

        $(document).ready(function () {
            slider();
        });

我已经链接了 jQuery.min 库并调用了 document.ready 中的函数 请帮助我如何在 AngularJS 中制作

Answer 1

在 HTML 中：

<div class="slide-container" ng-init="initSlider()">
        <div class="slide-scroller" ng-repeat="item in sliderList" style="left: 0px;">
            <div class="slideContent" style="background-color: {{item.bgColor}}">{item.content}</div>
        </div>
    </div>
    <input type="button" id="left">
    <input type="button" id="right">

在控制器中：

$scope.initSlider = function(){
    slider()
}