Prevent AngularJS from removing data- in attributes

Question

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?

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, Commented Feb 12, 2014 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 Singh Beniwal, Commented Feb 12, 2014 at 21:00

Daniel Flippance · Accepted Answer · 2014-02-12 22:23:49Z

0

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>

answered Feb 12, 2014 at 22:23

Daniel Flippance

7,9526 gold badges47 silver badges61 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Prevent AngularJS from removing data- in attributes

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related