Question

我正在使用tweeter bootstrap我的角度项目，使用data-slide属性进行tweeter轮播：

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

在浏览器控制台中导致angularJS错误

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">

如何解决tweeter bootstrap和angularJS之间的冲突

Answer 1

尝试在a标签中添加target =“_ self”，angularjs将忽略具有目标属性的链接

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

Answer 2

数据幻灯片由Bootstrap和ui.bootstrap使用，因此这里存在冲突。忽略角度应用。为此，将 ng-non-bindable 插入适当的Dom元素。

Answer 3

尝试使用Angular Bootstrap Directives

Answer 4

如果你不能替换整个现有的TWBS轮播（像我一样），你至少可以替换两个<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <body data-spy="scroll" data-target=".navbar" data-offset="60"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Test</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#section1">1</a> </li> <li><a href="#section2">2</a> </li> <li><a href="#section3">3</a> </li> <li><a href="#section4">4</a> </li> </ul> </div> </div> </nav> <div class="container-fluid" id="section1"> <div class="starter-template"> <h1>1</h1> <p class="lead">Use this document as a way to quickly start any new project. <br>All you get is this text and a mostly barebones HTML document.</p> </div> </div> <div class="container-fluid" id="section2"> <div class="starter-template"> <h1>2</h1> <p class="lead">Use this document as a way to quickly start any new project. <br>All you get is this text and a mostly barebones HTML document.</p> </div> </div> <div class="container-fluid" id="section3"> <div class="starter-template"> <h1>3</h1> <p class="lead">Use this document as a way to quickly start any new project. <br>All you get is this text and a mostly barebones HTML document.</p> </div> </div> <div class="container-fluid" id="section4"> <div class="starter-template"> <h1>4</h1> <p class="lead">Use this document as a way to quickly start any new project. <br>All you get is this text and a mostly barebones HTML document.</p> </div> </div>属性 - 因为这两个属性不情愿地被视为Angular data-slide指令。所以，我从两个＆＃39; prev / next＆＃39;中删除了这些属性。控制并编写了一些额外的JS来手动处理点击事件。看起来像这样：

slide

Bootstrap数据幻灯片属性与angularJS冲突

4 个答案: