angularjs和bootstrap javascript

我有一個twitter引導旋轉木馬在一個角度的應用程序。如果使用該數據滑動從而屬性：angularjs和bootstrap javascript

<a data-slide="prev" href="#myCarousel" class="left carousel-control">&lsaquo;</a>

則href=#myCarousel中解釋爲一個途徑，並在當前頁被重新加載。（我使用HTML5模式）

我可以旋轉木馬通過這種替換工作：

<a href="#" class="left carousel-control" ng-click="carouselPrev()">&lsaquo;</a>

，並在控制器：

$scope.carouselPrev = function(){ 
    $('#myCarousel').carousel('prev'); 
};

但什麼是這樣做的正確方法？

來源

2013-02-14 DavidC

還是......用這個：Angular-UI - Bootstrap（包括旋轉木馬指令。）

來源

2013-02-14 17:50:19 Sharondio

在這上面它是作爲本地AngularJS指令來實現改變的href的bug，因此，可以看到它可以做:-) – 2013-02-14 19:42:36

不，這不是正確的方法。不要在控制器內進行任何DOM修改。對此沒有例外。這只是不好的做法。

你想要做的是使用directives。

這裏是鏈接到幫助您開始：http://docs.angularjs.org/guide/directive

來源

2013-02-14 16:36:17

看到，因爲你把我放在正確的道路來解決我的問題我有，下面是我的指令和HTML

angular.module('portal.directives', []) 
    .directive('bootCarousel', function(){ 
     return function(scope, elem, attrs) { 
      scope.carouselPrev = function(){ 
       $('#'+attrs.id).carousel('prev'); 
      } 

      scope.carouselNext = function(){ 
       $('#'+attrs.id).carousel('next'); 
      } 
     } 
    });

HTML：

<div id="carousel-generic" class="carousel slide" data-slide="cycle" boot-carousel> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-generic" data-slide-to="{{$index}}" ng-class="{'active': $index == 0, '': $index != 0}" ng-repeat="banner in banners"></li> 

    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
     <div ng-class="{'item active': $index == 0, 'item': $index != 0}" style="height: 340px; background: #c33" ng-repeat="banner in banners"> 
      <div ng-bind-html-unsafe="banner.sContent"></div> 
      <div class="carousel-caption"> 

      </div> 
     </div> 
    </div> 
    <!-- Controls --> 
    <a class="left carousel-control" ng-click="carouselPrev()" href="" data-slide="prev"> 
     <img src="images/Portal_header_arrowL.png" alt="Previous"> 
    </a> 
    <a class="right carousel-control" ng-click="carouselNext()" href="" data-slide="next"> 
     <img src="images/Portal_header_arrowR.png" alt="Next"> 
    </a>

來源

2013-09-11 07:36:59

我固定的數據目標

<a data-slide="prev" data-target="#myCarousel" class="left carousel-control">&lsaquo;</a>

來源

2014-07-25 18:39:05

angularjs和bootstrap javascript

回答

相關問題