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

Question

:)

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? :(

Try removing `inccarousel` from p. Otherwise it doesn't match the example structure. And creating a example at jsfiddle could help to better understand your case. — ProdoElmit, Nov 28 '13 at 20:38
@thenewseattle because jquery doesn't work with this html:
{{ foo }} — Dennis Ruiz, Nov 29 '13 at 13:25
https://github.com/angular/angular.js/wiki/Anti-Patterns **1.** Don't wrap element inside of $(). All AngularJS elements are already jq-objects, **2.** Don't use jQuery to generate templates or DOM ;) — Evgeniy Tkachenko, Feb 07 '14 at 10:48

score 1 · Answer 1 · answered Nov 29 '13 at 13:47

1

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...

answered Nov 29 '13 at 13:47

Dennis Ruiz

147
1
3
11

I had similar problem with running `foundation` script on ajax pageloads, it's working with this code: https://gist.github.com/morodeer/7710306 . Maybe, it'll help – ProdoElmit Nov 29 '13 at 18:54
@darvein would you mind if you give some working example in jsfiddle... please – Bijay Rai Oct 13 '14 at 05:54

score 0 · Answer 2 · answered May 08 '14 at 08:49

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.

would you mind if you give some working example in jsfiddle... please — Bijay Rai, Oct 13 '14 at 05:53

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

2 Answers2