AngularJs slider

by sas_sam

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular-animate.js"></script>
<div class="slider-container columns" data-ng-app="slider" data-ng-controller="SliderCtrl">
    <div class="row">
        <div class="arrow left"><a href="#" data-arrow="left"><</a></div>
        <div class="columns">
            <div class="logo-container row">
                <ul reference-slider="sliderOffset">
                    <li class="reference-logo">
                        <img src="http://dummyimage.com/200x150/333/ffffff" alt="" />
                    </li>
                    <li class="reference-logo">
                        <img src="http://dummyimage.com/200x150/333/ffffff" alt="" />
                    </li>
                    <li class="reference-logo">
                        <img src="http://dummyimage.com/200x150/333/ffffff" alt="" />
                    </li>
                    <li class="reference-logo">
                        <img src="http://dummyimage.com/200x150/333/ffffff" alt="" />
                    </li>
                    <li class="reference-logo">
                        <img src="http://dummyimage.com/200x150/333/ffffff" alt="" />
                    </li>
                    <li class="reference-logo">
                        <img src="http://dummyimage.com/200x150/333/ffffff" alt="" />
                    </li>
                    <li class="reference-logo">
                        <img src="http://dummyimage.com/200x150/333/ffffff" alt="" />
                    </li>
                    <li class="reference-logo">
                        <img src="http://dummyimage.com/200x150/333/ffffff" alt="" />
                    </li>
                </ul>
            </div>
        </div>
        <div class="arrow right"><a href="#" data-arrow="right">></a></div>
    </div>
</div>

SCSS

.slider-container {
    overflow: hidden;
    background: #fff;
    position: relative;
    height: 150px;
    background: yellow;
    width: 100%;
    
    .row {
        position: relative;
        
        .arrow {
            position: absolute;
            text-align: center;
            z-index: 10;
            filter: alpha(opactiy=75);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
            -moz-opacity: 0.75;
            -khtml-opacity: 0.75;
            opacity: 0.75;
            background: #fff;
            height: 150px;
            width: 30px;
            top: 0;
            &.left {
                left: 0;
            }
            &.right {
                right: 0;
            }
            a {
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                color: #e94c00;
                font-size: 16px;
                padding-top: 30px;
                &.disabled {
                    color: #000;
                }
            }
        }
        
        .columns {
            margin: 0 30px;
            background: green;

            .logo-container {
                position: relative;    
            
                ul {
                    position: relative;
                    margin: 0;
                    width: 1000%;
                    height: 150px;
                    padding: 0;
                    -webkit-transition: left 0.3s ease-out;
                    -moz-transition: left 0.3s ease-out;
                    -ms-transition: left 0.3s ease-out;
                    -o-transition: left 0.3s ease-out;
                    transition: left 0.3s ease-out;                    
                    
                    .reference-logo {
                        position: relative;
                        list-style: none;
                        display: block;
          ...

JavaScript

var slider = angular.module("slider", []);

slider.controller("SliderCtrl", function ($scope) {
    'use strict';

        $scope.sliderOffsetValue = 0;
        $scope.sliderOffset = "0px";
        $scope.sliderContainerWidth = 0;
        $scope.sliderLogoWidth = 0;
        $scope.sliderLogoCount = 0;
        $scope.sliderEndOffset = $scope.sliderLogoWidth * $scope.sliderLogoCount;

        $scope.$watch("sliderOffsetValue", function(newVal) {
            $scope.isFirstSlide = (newVal == 0);
            $scope.isLastSlide = (newVal - $scope.sliderContainerWidth < -($scope.sliderEndOffset));
            $scope.sliderOffset = newVal + "px";
        });

    
});


slider.directive("referenceSlider", function() {
    'use strict';
    return function($scope, element, attrs) {
        $scope.$watch(attrs.referenceSlider, function(newVal) {
            element.css('left', newVal);
        });

        $scope.sliderLogoCount = element.children().length;
        $scope.sliderEndOffset = $scope.sliderLogoWidth * $scope.sliderLogoCount;
        
        console.log($scope.sliderLogoCount);
    };
});

slider.directive("logoContainer", function($window) {
    'use strict';
    return {
        restrict: 'C',
        link: function($scope, element, attrs) {

            var $w = angular.element($window);

            $scope.sliderContainerWidth = element[0].clientWidth;

            $w.on('resize', function() {
                $scope.sliderContainerWidth = element[0].clientWidth;
                $scope.$apply();
            });
        }

    };
});

slider.directive("referenceLogo", function() {
    'use strict';
    return {
        restrict: 'C',
        link: function($scope, element, attrs) {
            $scope.sliderLogoWidth = element[0].clientWidth;
        }

    };
});

slider.directive("arrow", function() {
    'use strict';
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {

            $scope.$watch("isFirstSlide",...