ui bootstrap tpl 2.5.0 版不支持轮播

Question

自 2 天以来，我一直在努力解决以下问题。我需要实现模态弹出窗口，出现“未知提供者：$uibModalProvider”错误。于是我将ui-bootstrap-tpls.min.js的版本从0.10.0升级到了2.5.0。它修复了我的模态弹出问题，但它完全毁了我的轮播。请帮帮我。 我正在使用 角版本 - 1.5.3 ui 引导最小。 js 版本 - 1.3.3 ui-bootstrap-tpls.min.js - 2.5.0

    <script src="lib/angular/angular-ui-bootstrap/ui-bootstrap.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular-route.min.js"></script>
    <script src="lib/angular/angular-animate/angular-animate.min.js"></script>
    <script src="lib/angular/angular-sanitize/angular-sanitize.js"></script>
    <script src="lib/angular/angular-ui-router/angular-ui-router.js"></script>
    <script src="lib/angular/angular-ocLazyLoad/ocLazyLoad.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

<carousel interval="myInterval">
                                <slide active="guide.active">
                                    <div class="fill" style="background-image:url('{{guide.image}}');"></div>
                                    <div class="carousel-caption">
                                        <h4>{{guide.type}}</h4>
                                        <h5>{{guide.time_duration}}</h5>
                                    </div>
                                    <div class="carousel-caption-hover">
                                        <h4>{{guide.type}}</h4>
                                        <h5>{{guide.time_duration}}</h5>
                                        <div class="btn-row">
                                            <a ui-sref="root.guide({city_slug: '{{cityData.slug}}', guide_type_slug: '{{guide.slug}}'})" ui-sref-opts="{reload: true}">Book Now</a>  
                                        </div>
                                    </div>
                                </slide>
                            </carousel>

app.controller('GuideCtrl', function ($scope, $rootScope, WebService) {
    $scope.myInterval = 3000;
    WebService.GuideType().then(function (response) {
        if (response.success){
            $scope.guides = response.data;
            $rootScope.guidesList = $scope.guides;
        }
    });
});

感谢您的帮助。

谢谢

Answer 1

这是解决我的问题的完整解决方案。 我已经删除了

<script src="lib/angular/angular-ui-bootstrap/ui-bootstrap.min.js"></script>

并将 uib 版本从 2.5.0 降级到 1.2.1

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap-tpls.min.js"></script>

html也是这样改的

<uib-carousel interval="myInterval">
                            <uib-slide ng-repeat="g in guide" index="$index">
                                <div class="fill" style="background-image:url('{{guide.image}}');"></div>
                                <div class="carousel-caption">
                                    <h4>{{guide.type}}</h4>
                                    <h5>{{guide.time_duration}}</h5>
                                </div>
                                <div class="carousel-caption-hover">
                                    <h4>{{guide.type}}</h4>
                                    <h5>{{guide.time_duration}}</h5>
                                    <div class="btn-row">
                                        <a ui-sref="root.guide({city_slug: '{{cityData.slug}}', guide_type_slug: '{{guide.slug}}'})" ui-sref-opts="{reload: true}">Book Now</a>  
                                    </div>
                                </div>
                            </uib-slide>
                        </uib-carousel>

将此添加到脚本中

$scope.noWrapSlides = false;

Answer 2

你有同一个库的两个不同版本

<script src="lib/angular/angular-ui-bootstrap/ui-bootstrap.min.js"></script>

和

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

删除第一个

另外，使用新的前缀指令uib-carousel

<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
  <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
      <h4>Slide {{slide.id}}</h4>
      <p>{{slide.text}}</p>
    </div>
</div>