current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
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.
up vote 1 down vote favorite

I'm building an image carousel using jCarousel and AngularJS. The carousel works great until I plug in AngularJS and it seems to be because AngularJS is normalizing (removing) all attributes in the HTML which start with data-

The normalization process is as follows: - Strip x- and data- from the front of the element/attributes.

http://docs.angularjs.org/guide/directive

However, jCarousel uses it's own attributes that start with data-, so Angular removes these and causes the carousel to stop working

<div class="connected-carousels ng-scope" ng-controller="ImageCtrl">
    <div class="stage">
        <div class="carousel carousel-stage" data-jcarousel="true">

I'm not using any of the Angular data- prefixed attribute names so is there a way I can prevent Angular from doing the normalization process on data- attributes so that they are not modified? Or perhaps there is a way to force the carousel code to run before the Angular normalization?

share|improve this question
2  
what you referred to is angular's internal processing of finding which attributes are actually directives, its just saying they take the x- and data- parts out of attribute names like data-ng-bind to see if it actually matches ng-bind. it is not actually removing the attributes from the element. –  Patrick Evans Feb 12 at 20:50
    
it does not remove any attribute its just matching syntax for directives your code have some other problem kindly set up plunker or share some more code please –  Ajay Beniwal Feb 12 at 21:00
    
ok thanks = working on jsFiddle –  Daniel Flippance Feb 12 at 21:32
add comment

1 Answer

up vote 0 down vote

The problem was solved by listing the jCarousel .js libraries AFTER the Angular libraries in the HEAD. Here's an example that shows both Angular populated and manually populated carousels working correctly:

http://jsfiddle.net/rWrjw/

  <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>
  <script type='text/javascript' src='//cdn.jsdelivr.net/jcarousel/0.3rc1/jquery.jcarousel.min.js'></script>
share|improve this answer
add comment

Your Answer

 
discard

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.