Bootstrap data-slide property conflicts with angularJS

Question

I am using tweeter bootstrap side by side my angular project, using data-slide property for tweeter carousel:

        <a class="carousel-control left" href="#masthead-carousel" data-slide="prev"><i class="fa fa-reply"></i></a>

causes angularJS error in Browser console

Error: [$compile:ctreq] http://errors.angularjs.org/1.2.17/$compile/ctreq?p0=carousel&p1=slide
    at Error (native)
    at http://localhost:9000/assets/js/angular/1.2/angular.min.js:6:450
    at D (http://localhost:9000/assets/js/angular/1.2/angular.min.js:51:80)
    at N (http://localhost:9000/assets/js/angular/1.2/angular.min.js:54:128)
    at http://localhost:9000/assets/js/angular/1.2/angular.min.js:60:280
    at http://localhost:9000/assets/js/angular/1.2/angular.min.js:71:373
    at l.promise.then.D (http://localhost:9000/assets/js/angular/1.2/angular.min.js:99:263)
    at http://localhost:9000/assets/js/angular/1.2/angular.min.js:100:417
    at h.$get.h.$eval (http://localhost:9000/assets/js/angular/1.2/angular.min.js:111:121)
    at h.$get.h.$digest (http://localhost:9000/assets/js/angular/1.2/angular.min.js:108:200) <div ng-class="{
    'active': leaving || (active &amp;&amp; !entering),
    'prev': (next || active) &amp;&amp; direction=='prev',
    'next': (next || active) &amp;&amp; direction=='next',
    'right': direction=='prev',
    'left': direction=='next'
  }" class="carousel-control left item text-center ng-isolate-scope" ng-transclude="" href="#masthead-carousel" data-slide="prev">

How can I resolve this conflicts between tweeter bootstrap and angularJS

Do you have any custom directive called slide Slide? usually there will be no problem with data-slide unless angularjs found one inside app — maurycy
– maurycy, Commented Jul 8, 2014 at 10:40
There is not any directives like slide or dataSlide or DataSlide in my angular modules — Nik Kashi
– Nik Kashi, Commented Jul 8, 2014 at 10:49

Jerry Chen · Accepted Answer · 2015-11-26 00:49:54Z

4

Try add target="_self" in the a tag, angularjs will ignore links with target attribute

<a class="carousel-control left" href="#masthead-carousel" target="_self" data-slide="prev"><i class="fa fa-reply"></i></a>

answered Nov 26, 2015 at 0:49

Jerry Chen

7257 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suhail Ahmed · Accepted Answer · 2016-12-30 11:08:44Z

2

data-slide is used by both Bootstrap and ui.bootstrap so there is a conflict here. To ignore angular apply.To do that insert ng-non-bindable into the appropriate Dom element.

answered Dec 30, 2016 at 11:08

Suhail Ahmed

3603 silver badges4 bronze badges

Comments

pokaxperia · Accepted Answer · 2014-07-08 18:45:02Z

0

Try use Angular Bootstrap Directives

answered Jul 8, 2014 at 18:45

pokaxperia

872 silver badges10 bronze badges

Comments

Detlef Peters · Accepted Answer · 2015-11-24 16:11:09Z

0

If you cannot replace the entire existing TWBS carousel (like me), you can at least replace the two data-slide attributes - because these two are unwillingly treated as Angular slide directives. So, I eliminated these attributes from the two 'prev/next' controls and wrote some additional JS to handle the click events manually. Looks like this:

$('.left.carousel-control').on('click', (e) ->
  carousel = $(e.currentTarget).data('target')
  $(carousel).carousel('prev')
)

answered Nov 24, 2015 at 16:11

Detlef Peters

11 bronze badge

Collectives™ on Stack Overflow

Bootstrap data-slide property conflicts with angularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related