Question

自从2天以来，我一直在努力解决这个问题。我需要实现模态弹出窗口，我得到了＆＃34;未知提供者：$ uibModalProvider＆＃34;错误。所以我将ui-bootstrap-tpls.min.js的版本从0.10.0升级到2.5.0。它解决了我的模态弹出问题，但它完全破坏了我的旋转木马。请帮帮我。我正在使用角度版本 - 1.5.3 ui bootstrap min。 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>

＆＃13;

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

＆＃13;

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

＆＃13;

我感谢任何帮助。

由于

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>

删除第一个

另外，使用新的prexied指令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>

ui bootstrap tpl版本2.5.0不支持轮播

2 个答案: