directive
fixed me : 不知道如何取對應(yīng)的元素恩静，所以都用了類似const dots = angular.element(element.children()[0]);的方法來取對應(yīng)節(jié)點贸毕，感覺可以有更好的方法可以取峭弟。

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嚴(yán)格按照這個順序栅盲，要不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>
      <!-- 內(nèi)容  -->
      <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;
            }
            
        }

    }
}