Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm having issues with the animations when I try to use the jquery plugin "roundabout" (http://fredhq.com/projects/roundabout/) with an AngularJS application. I've written a directive for it:

carousel: [function() { return {
  link: function($scope, $elem, $attrs) {
    $($elem).roundabout()
  }
}}],

and the html looks like:

<ul carousel="{}">
  <li>Test</li>
  <li>Another Test</li>
  <li>Three Test</li>
  <li>Four Test</li>
  <li>Five Test</li>
</ul>

When I run the application, I see the carousel activate, which isn't a problem, so I know the directive seems to work. The issue is the animation. Clicking one of them should provide a smooth rotating animation, but instead it moves slowly to the right for about a second (only a few pixels) (doesn't matter if it should be turning right or left) then jumps to the new position. Is there a way to get it to work with Angular, or something obvious I'm missing? I've looked into ng-animate, but I don't think I can use it in this case, considering that the plugin is handling the animations.

share|improve this question
    
I am near 110% positive this has nothing to do with angular. Trying using the pluggin outside of angular and get it to work there. There is something wrong with your html or css. –  Fresheyeball Jul 8 '13 at 3:50
    
this should really be an element directive and not restricted like it is to an attribute. The reason being: you need finer control of injections into your child elements... which should also be directives if you want to go the angular directive route. Also, you absolutely CAN use ngAnimate with this. It can help bind plugin events to DOM events which you can bind to your directive. –  Brian Vanderbusch Feb 2 at 0:36
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.