CODEWITHSUNDEEP
javascriptjqueryangularjs
Neetu sharma
Neetu sharma

Reputation: 148

how to make directive in angular of owl carousel?

can you please tell me how to make dirctive in angular js .I need to use owl carousel plugin in js as I did in jqm fiddle http://jsfiddle.net/ezanker/o9foej5L/1/ .I need to make same thing in angular using directive can you please tell me how I will implement this using directive http://plnkr.co/edit/4ySYwsqrBKUJUj6MwoRY?p=catalogue

<!DOCTYPE html>
<html>

  <head>
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
      <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" />
     <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="   http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" />

    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="[email protected]" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script src="script.js"></script>
    <script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
  </head>

  <body>
   <div id="owl-demo">
 <div class="item"><p>one</p></div>
<div class="item"><p>two</p></div>
<div class="item"><p>three</p></div>
<div class="item"><p>four</p></div>
</div>
  </body>

</html>

Upvotes: 2

Views: 2404

Answers (2)

David Rearte
David Rearte

Reputation: 874

Here is my general solution. This works with ngrepeat and with refresh data of the scope. The trick is add a directive for the last item, so the init will be fired when the last item is in the dom.

<div owl-slides-count="3" owl-carousel="">
  <div ng-repeat="post in posts" owl-carousel-item="">
   ...
   </div>
</div>

... the js

.directive('owlCarousel', ['$timeout', function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.initCarousel = function () {
                    // hacky ondomready
                    $timeout(function hackyDomReady() {
                        // if is already initialized destroy and re create it
                        // $(element).data().owlCarousel <- owl 2
                        if ($(element).data('owlCarousel')) { // <- owl 1
                            // $(element).trigger('destroy.owl.carousel'); // <- owl 2
                            $(element).data('owlCarousel').destroy();// <- owl 1
                        }

                        $(element).owlCarousel({
                            autoPlay: 10000,
                            navigation: true,
                            items: attrs.owlSlidesCount
                        });
                    });
                };
            }
        };
    }])

    .directive('owlCarouselItem', [function () {
        return {
            restrict: 'A',
            transclude: false,
            link: function (scope, element) {
                if (scope.$last) {
                    scope.initCarousel();
                }
            }
        };
    }])

Upvotes: 1

bmleite
bmleite

Reputation: 26880

You can use a directive like this:

app.directive('owlCarousel', function() {
  return {
    restrict: 'A',
    scope: {
      owlOptions: '='
    },
    link: function(scope, element, attrs) {
      $(element).owlCarousel(scope.owlOptions);
    }
  };
});

And on the HTML add it as an attribute:

<div owl-carousel owl-options="owlOptions">
  ...
</div>

Demo

Upvotes: 3

Related Questions