angular 的directive写一个轮播

directive
fixed me : 不知道如何取对应的元素，所以都用了类似const dots = angular.element(element.children()[0]);的方法来取对应节点，感觉可以有更好的方法可以取。

return {
        restrict: 'EA',
        scope: {
            leng: '@leng'
        },
        link(scope, element) {
            const dots = angular.element(element.children()[0]);
            const slide = angular.element(element.children()[1]);
            const hander = angular.element(element.children()[2]);
            const left = angular.element(hander.children()[0]);
            const right = angular.element(hander.children()[1]);
            let index = 0;

            function slider(a) {
                <!--这里的-273 是图片的宽度270px加上图片的margin-right3px-->
                slide.css('transform', 'translate3d(' + a * -273 + 'px, 0, 0)');
                dots.find('li').removeClass('active').eq(a).addClass('active');
                <!--最左边或者最右边，左或右按钮加上不可用的css样式-->
                a === 0 ? left.addClass('disable') : left.removeClass('disable');
                a === scope.leng - 1 ? right.addClass('disable') : right.removeClass('disable');
            }

            dots.on('mouseover', () => {
                angular.forEach(dots.find('li'), (v, k) => {
                    dots.find('li').eq(k).on('click', () => {
                        slider(k);
                    });
                })
            });

            dots.on('mouseout', () => {
                angular.forEach(dots.find('li'), (v, k) => {
                    dots.find('li').eq(k).off('click');
                })
            });
           <!--点击左边的控制按钮，图片向左边滑动-->
            left.on('click', () => {
                if (index > 0) {
                    index--;
                }
                slider(index);
            });
            <!--点击右边的控制按钮，图片向右边滑动-->
            right.on('click', () => {
                if (index < scope.leng - 1) {
                    index++;
                }
                slider(index);
            });
        }
    };

html严格按照这个顺序，要不directive改一下顺序也可以

<div class="slider" slide-left leng="{{ items.imgs.length }}">
      <!-- 小圆点 -->
      <ol>
          <li ng-repeat="imgSrc in items.imgs track by $index" ng-class="{'active':$first}"></li>
      </ol>
      <!-- 内容  -->
      <div class="slider-inner clear-fix">
            <div class="item" ng-repeat="imgSrc in items.imgs track by $index">
                <img ng-src="{{ imgSrc }}" alt="">
             </div>
       </div>
       <!-- 控制按钮 -->
        <div class="hander">
             <a class="glyphicon glyphicon-menu-left disable"></a>
             <a class="glyphicon glyphicon-menu-right"></a>
        </div>
</div>

css

.slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    position: relative;
    font-size: 0;

    ol {
        width: 100%;
        @include position(absolute, null null 10px 0);
        z-index: 3;
        list-style: none;
        margin-bottom: 0;
        padding-left: 0;

        li {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            cursor: pointer;
            background-color: $border-color;
            margin-right: 8px;

            &.active {
              background-color: $theme-color;
            }

        }

    }

    .slider-inner {
        font-size: 10px;
        width: 9999px;
        text-align: left;
        transition: all .4s;
    }

    .item {
        display: inline-block;
        width: 270px;
        margin-right: 3px;

        img {
            max-width: 100%;
        }

    }

    .hander {
        z-index: 2;
        height: 100px;
        width: 100%;
        @include position(absolute, 50% null null 0);
        margin-top: -50px;

        a {
            font-size: 24px;
            z-index: 2;
            display: block;
            width: 50px;
            height: 100px;
            line-height: 100px;
            vertical-align: middle;
            cursor: pointer;
            color: $theme-color;

            &:hover {
                text-decoration: none;
            }

            &.glyphicon-menu-left {
                @include position(absolute, 0 null null 0)
            }

            &.glyphicon-menu-right {
                @include position(absolute, 0 0 null null)
            }

            &.disable {
                color: lighten($theme-color,25%);
                // cursor: not-allowed;
            }
            
        }

    }
}