CODEWITHSUNDEEP
jqueryangularjs
Dennis Ruiz
Dennis Ruiz

Reputation: 147

How Can I use owl carousel with angular.js directive?

:)

I'm trying to use "owl carousel" jquery plugin with Angular.js directive, this is the html example (http://owlgraphic.com/owlcarousel/demos/images.html)

<div id="owl-demo">
 <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
 <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
 <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
 <div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
</div>

Using simple Jquery Owl Carousel runs with:

 $("#owl-demo").owlCarousel();

Now, i'm trying to use this with Angular.js using this directive:

'use strict';

angular.module('MyApp')
  .directive('inccarousel', () ->
    restrict: "A"
    link: (scope, element, attrs) ->
      $(element).owlCarousel()
  )

And this angular view:

<div inccarousel>
        <p inccarousel ng-repeat="foo in foobar">{{ foo }}</p>
</div>

But it doesn't work, When I looked the html output I got this:

....
<div inccarousel="" style="opacity: 0;">
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">1</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">2</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">3</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">4</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">5</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">6</p>
 <p ng-repeat="foo in foobar" class="ng-scope ng-binding">7</p>
</div>
....

Any body can help with this? :(

Upvotes: 3

Views: 7358

Answers (2)

Daniel Twigg
Daniel Twigg

Reputation: 759

I have struggled with this for so long now.

It would seem that it is not possible to use it with ng-repeat.

However it is possible to modify the DOM yourself with a forEach loop of your data.

An example:

newCarSearchApp.directive('slyCarousel', function() {

return {
  restrict: 'E',
  replace: true,
  templateUrl: '/templates/carouselTemplate.html',

  link: function(scope, element, attrs) {

        angular.forEach(scope.slides, function(value, key){
          $('#owl-example').append("<div>"+value+"</div>");
        });

        $("#owl-example").owlCarousel();   
  }
}
})

Then you ensure it does not run until data has finished being transferred via AJAX by using a promise or hack it yourself with an ng-if="ajaxComplete", This crucial line of code solved it for me.

Upvotes: 0

Dennis Ruiz
Dennis Ruiz

Reputation: 147

I have found solution :D Just simple adding to directive inccarousel:

scope.$watch attrs.list, ->
        $(element).owlCarousel()

But it doesn't work with content loaded dynamically (ajax). :( I'm near...

Upvotes: 1

Related Questions