CODEWITHSUNDEEP
javascriptjqueryangularjsbxslider
Ronnie
Ronnie

Reputation: 11198

Turning jQuery plugin into directive

I'm trying to turn an existing jquery plugin into a directive to use in my angular app.

My html:

<div ng-controller="BoxController">
  <ul class="bxslider" bx-slider="{mode: 'horizontal', pager: false, controls: true, minSlides: 1, maxSlides:4, slideWidth: 350, slideMargin:10, infiniteLoop: false, hideControlOnEnd: true}">
    <li ng-repeat="obj in items track by $index">
      <div class="item"><img ng-src="{{obj + $index}}" /></div>
    </li>
  </ul>
</div>

So my directive is bx-slider or bxSlider

app.directive('bxSlider', function()
    {
        return {
            restrict: 'A',
            link: function(scope, element, attrs)
            {
                angular.element(element).bxSlider(scope.$eval(attrs.bxSlider));
            }
        }
    });

What happens is I get a list of images in a bulleted list. The CSS is certainly getting applied however the actions of it being a carousel isn't working. It is supposed to be something like this:

http://bxslider.com/examples/carousel-dynamic-number-slides

However I get

http://dopserv1.dop.com/bxslider/

with no errors in the console or anything. If I do a console.log on attrs.bxSlider I see all the params I defined in the HTML above. What am I doing wrong here? I am including jQuery 1.10.2 above the angular include.

Upvotes: 2

Views: 1175

Answers (1)

GFoley83
GFoley83

Reputation: 3569

Here's working example: http://plnkr.co/edit/KCwzmG?p=preview

With the part of the solution coming from here.

HTML

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
  <script src="http://code.angularjs.org/1.2.3/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div data-ng-controller="BoxController">
    <ul class="bxslider" data-bx-slider="mode: 'horizontal', pager: false, controls: true, minSlides: 1, maxSlides:4, slideWidth: 350, slideMargin:10, infiniteLoop: false, hideControlOnEnd: true">
      <li data-ng-repeat="obj in items track by $index" data-notify-when-repeat-finished>
        <div class="item">
          <img data-ng-src="http://lorempixel.com/400/200/sports/{{$index + 1}}/" />
        </div>
      </li>
    </ul>
  </div>
</body>
</html>

JS

var app = angular.module('plunker', []);

app.controller('BoxController', ['$scope', function ($scope) {
    $scope.items = [1, 2, 3, 4, 5];
}]);

app.directive('bxSlider', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$on('repeatFinished', function () {
                console.log("ngRepeat has finished");
                element.bxSlider(scope.$eval('{' + attrs.bxSlider + '}'));
            });
        }
    }
}])
.directive('notifyWhenRepeatFinished', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('repeatFinished');
                });
            }
        }
    }
}]);

Upvotes: 2

Related Questions