angularjs и bootstrap javascript

Question

У меня есть карусель в twitter bootstrap в угловом приложении. Если я использую данные салазки атрибут таким образом:

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

но что это правильный способ сделать это?

Answer 1

Или ... используйте: Angular-UI - Bootstrap (включает в себя директиву карусельного.)

Answer 2

Нет, это не правильный путь. Не делайте никаких модификаций DOM внутри контроллера. Исключений нет. Это просто плохая практика.

Что вы хотите сделать, это использовать directives.

Вот ссылка, чтобы помочь вам начать работу: http://docs.angularjs.org/guide/directive

Answer 3

Видя, как вы меня на правильном пути, чтобы исправить мою проблема у меня, ниже моя директива и 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> 

Answer 4

я исправлена ​​ошибка, меняющийся HREF на данных-мишени

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