2

我在 Angular 应用程序中有一个 twitter 引导轮播。如果我这样使用 data-slide 属性：

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

然后将href=#myCarouselin 解释为路由并重新加载当前页面。（我使用的是 HTML5 模式）

我可以通过替换这个来让旋转木马工作：

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

在控制器中：

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

但是这样做的正确方法是什么？

4

4 回答 4

4

或者......使用这个：Angular-UI - Bootstrap（包括一个轮播指令。）

于 2013-02-14T17:50:19.480 回答
2

我修复了通过数据目标更改 href 的错误

<a data-slide="prev" data-target="#myCarousel" class="left carousel-control">&lsaquo;</a>
于 2014-07-25T18:39:05.357 回答
1

看到你让我走上正确的道路来解决我遇到的问题，下面是我的指令和 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-11T07:36:59.770 回答
0

不，这不是正确的方法。永远不要在控制器内部进行任何 DOM 修改。没有例外。这只是不好的做法。

您要做的是使用directives.

这是帮助您入门的链接：http: //docs.angularjs.org/guide/directive

于 2013-02-14T16:36:17.710 回答