¿puede decirme cómo hacer un directorio en js angular? Necesito usar el complemento de carrusel de búhos en js como lo hice en jqm fiddle http://jsfiddle.net/ezanker/o9foej5L/1/ Necesito hacer lo mismo en la directiva de uso angular, ¿podría decirme cómo implementaré esta directiva de uso? 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>
2
Neetu sharma 5 sep. 2014 a las 17:09

2 respuestas

La mejor respuesta

Puede usar una directiva como esta:

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

Y en el HTML agrégalo como un atributo:

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

Demo

3
bmleite 5 sep. 2014 a las 13:37

Aquí está mi solución general. Esto funciona con ng repeat y con datos de actualización del ámbito. El truco consiste en agregar una directiva para el último elemento, por lo que la unidad se disparará cuando el último elemento esté en el dom.

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

... el 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
David Rearte 20 nov. 2017 a las 16:09