Clever Geek Handbook

How to make a directive in angular owl carousel?

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

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
      <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" />
     <link data-require="bootstrap-css@3.x" 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="ui-bootstrap@0.10.0" 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>
+3


source to share


2 answers


You can use the following directive:

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

And in HTML add it as an attribute:



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

Demo

+3


source


Here is my general solution. This works with ngrepeat and updated scope data. The trick adds a directive for the last element, so init will run when the last element is in the dom.

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


... 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();
                }
            }
        };
    }])
+1


source






More articles:


All Articles