ui bootstrap tpl version 2.5.0 unterstützung karussell

Question

Ich habe mit folgenden Problem seit 2 Tagen zu kämpfen. Ich muss modales Popup implementieren, wo ich den Fehler "Unbekannter Provider: $ uibModalProvider" bekam. Also habe ich die Version von ui-bootstrap-tpls.min.js von 0.10.0 auf 2.5.0 aktualisiert. Es behebt mein modales Popup-Problem, aber es hat mein Karussell komplett zerstört. Bitte hilf mir. Ich benutze Winkelversion - 1.5.3 UI Bootstrap min. js Version - 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; 
 
     } 
 
    }); 
 
});

Ich schätze jede Hilfe.

Dank

Answer 1

Dies ist die komplette Lösung, die für mein Problem funktioniert hat. Ich habe

entfernt

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

Und herabgestuft uib Version von 2.5.0 bis 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> 

Auch veränderte html auf diese Weise

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

hat dieses Skript

$scope.noWrapSlides = false; 

Answer 2

Sie haben zwei verschiedene Versionen derselben Bibliothek

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

und

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

Entfernen Sie die erste

, auch die neue prexied Direktive verwenden 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>