CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Nik Kashi
Nik Kashi

Reputation: 4596

Bootstrap data-slide property conflicts with angularJS

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

Upvotes: 3

Views: 1592

Answers (4)

Suhail Ahmed
Suhail Ahmed

Reputation: 360

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.

Upvotes: 2

Jerry Chen
Jerry Chen

Reputation: 715

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>

Upvotes: 4

Detlef Peters
Detlef Peters

Reputation: 1

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')
)

Upvotes: 0

pokaxperia
pokaxperia

Reputation: 87

Try use Angular Bootstrap Directives

Upvotes: 0

Related Questions