bx-slider in angular

see http://stackoverflow.com/questions/20499993/

by David Gnanasekaran C

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css">
<script src="http://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.angularjs.org/1.2.4/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.js"></script>
<div ng-app="myApp" class="mybody">
    <p class="doctype-label">bx-slider in angular</p>
    <div ng-controller="MainCtrl">
        <div class="doc-list-wrapper" data-docs="docs"></div>
    </div>
</div>

<script type="text/ng-template" id="tmpl-doc-list-wrapper">
<ul class="doc-list" bx-slider>
    <li class="doc-thumbnail" ng-repeat="doc in docs" bx-slider-item>
        <a href="{{doc.doc}}" rel="external" target="_blank">
            <div class="date-box">
                <div class="year">{{doc.year}}</div>
                <div class="month">{{doc.monthShort}}</div>
            </div>
        </a>
        <span class="badge badge-important new-flag" ng-hide="doc.read">new</span>
    </li>
</ul>
</script>

CSS

.mybody {
  padding: 20px;
}
.doc-list-wrapper {
  position: relative;
}
.doctype-label {
  position: relative;
  margin-bottom: 0.8em;
  color: #aa152d;
  font-size: 125%;
  font-weight: bold;
}
.doc-list {
  margin: 0;
}
.date-box {
  border: 1px #555555 solid;
  margin: 6px;
  height: 80px;
  position: relative;
}
.date-box > div {
  text-align: center;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
}
.date-box .year {
  background-color: #555555;
  color: white;
  padding-top: 2px;
  padding-bottom: 2px;
}
.date-box .month {
  background-color: inherit;
  color: #555555;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 100%;
}
.date-box .month.downloaded {
  color: #888888;
}
.date-box .month.annual {
  padding-top: 8px;
  padding-bottom: 8px;
}
.doc-thumbnail {
  position: relative;
}
.date-box img {
  visibility: hidden;
  position: absolute;
  top: -4px;
  left: 10px;
}
.no-touch .doc-thumbnail a {
  text-decoration: none;
}
.no-touch .doc-thumbnail a:hover .date-box img {
  visibility: visible;
}
.touch .doc-thumbnail a {
  text-decoration: none;
}
.new-flag {
  position: absolute;
  left: -1px;
  top: 10px;
  display: inline-block;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}
.badge-important {
  background-color: #aa152d;
}

JavaScript

angular.module('myApp', [])
    .run(function ($templateCache) {
        $templateCache.put(
            'tmpl-doc-list-wrapper', jQuery('#tmpl-doc-list-wrapper').html());
    });

angular.module('myApp')
    .directive('bxSlider', function () {
        var BX_SLIDER_OPTIONS = {
            minSlides: 2,
            maxSlides: 7,
            slideWidth: 120
        };

        return {
            restrict: 'A',
            require: 'bxSlider',
            priority: 0,
            controller: function() {},
            link: function (scope, element, attrs, ctrl) {
                var slider;
                ctrl.update = function() {
                    slider && slider.destroySlider();
                    slider = element.bxSlider(BX_SLIDER_OPTIONS);
                };
            }
        }
    })
    .directive('bxSliderItem', function($timeout) {
        return {
            require: '^bxSlider',
            link: function(scope, elm, attr, bxSliderCtrl) {
                if (scope.$last) {
                    bxSliderCtrl.update();
                }
            }
        }
    })
    .directive('docListWrapper', ['$timeout', function ($timeout) {
        return {
            restrict: 'C',
            priority: 500,
            replace: false,
            templateUrl: 'tmpl-doc-list-wrapper',
            scope: { docs: '=docs'},
            link: function (scope, element, attrs) {
            }
        };
    }])
    .controller('MainCtrl', function ($scope, $interval) {
        $scope.docs =...