web-dev-qa-db-fra.com

utilisation de ui.bootstrap causant des problèmes avec le carrousel

Je ne parviens pas à faire fonctionner le carrousel correctement. J'ai utilisé yeomen pour échafauder l'application angulaire . Je reçois cette erreur

Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide
    at http://localhost:9000/bower_components/angular/angular.js:78:12
    at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)
    at http://localhost:9000/bower_components/angular/angular.js:6913:13
    at http://localhost:9000/bower_components/angular/angular.js:8113:11
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at http://localhost:9000/bower_components/angular/angular.js:11659:26
    at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)
    at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{
    'active': leaving || (active &amp;&amp; !entering),
    'prev': (next || active) &amp;&amp; direction=='prev',
    'next': (next || active) &amp;&amp; direction=='next',
    'right': direction=='prev',
    'left': direction=='next'
  }" class="left carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="prev"> angular.js:10072
Error: [$compile:ctreq] Controller 'carousel', required by directive 'slide', can't be found!
http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide
    at http://localhost:9000/bower_components/angular/angular.js:78:12
    at getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)
    at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)
    at http://localhost:9000/bower_components/angular/angular.js:6913:13
    at http://localhost:9000/bower_components/angular/angular.js:8113:11
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)
    at http://localhost:9000/bower_components/angular/angular.js:11659:26
    at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)
    at Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{
    'active': leaving || (active &amp;&amp; !entering),
    'prev': (next || active) &amp;&amp; direction=='prev',
    'next': (next || active) &amp;&amp; direction=='next',
    'right': direction=='prev',
    'left': direction=='next'
  }" class="right carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="next"> angular.js:10072

voici mon fichier html

 <style>
            #slides_control > div{
                height: 200px;
            }
            img{
                margin:auto;
                width: 400px;
            }
            #slides_control {
                position:absolute;
                width: 400px;
                left:50%;
                top:20px;
                margin-left:-200px;
            }
            .carousel-control.right {
                background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(237, 232, 232, 0.5) 100%) !important;
            }
            .carousel-control.left {
                background-image: linear-gradient(to right, rgba(249, 248, 248, 0.5) 0%, rgba(0, 0, 0, .0001) 100%) !important;
            }
        </style>
<div id="Carousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="Carousel" data-slide-to="0" class="active"></li>
        <li data-target="Carousel" data-slide-to="1"></li>
        <li data-target="Carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_41.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_45.png" class="img-responsive">
        </div>
        <div class="item">
            <img src="images/sliders/main_page_slider/PhoneApp_Website_Home_49.png" class="img-responsive">
        </div>
    </div>
    <a class="left carousel-control" href="#Carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

mon contrôleur est 

'use strict';

angular.module ('myhApp') .controller ('MainCtrl', fonction ($ scope) {});

voici mon app.js

angular
  .module('myhApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Je ne suis pas sûr de ce qui le cause. Toute aide serait appréciée.

** Quelques découvertes récemment **

ok, j'ai fouillé un peu et découvert que je devais avoir un carrousel dans le dom pour être dirigé (comme le dit l'erreur). Lorsque j'ajoute le carrousel, l'erreur disparaît, mais mon carrousel ne fonctionne plus et a l'air aussi débile.

Voici le changement que j'ai apporté à HTML

<div id="Carousel" class="carousel slide" carousel>

voici à quoi cela ressemble et vous pouvez voir qu’il ya une flèche supplémentaire dans le visage du chat. Je ne suis pas sûr de ce qui se passe .. toute aide sera appréciée

enter image description here

enter image description here

angularjsangularjs-directiveangular-uiyeomanangular-ui-bootstrap
19
Autolycus

J'ai pu résoudre le conflit en ajoutant le ng-non-bindable aux éléments dotés de la directive data-slide. voir ci-dessous:

  <a data-slide="prev" href="#clients-slider" ng-non-bindable class="left carousel-control">‹</a>
37
ozkary

data-slide est utilisé à la fois par Bootstrap et par ui.bootstrap, il y a donc un conflit ici. Si vous souhaitez utiliser la méthode du carrousel Bootstrap simple, vous pouvez demander à angular d'ignorer un élément DOM et ses enfants.

Pour ce faire, insérez ngNonBindable dans l’élément Dom approprié.

24
emanon

Selon gooseman's réponse sur SO:

angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
.controller('CarouselController', ['$scope', '$timeout', '$transition', '$q', function ($scope, $timeout, $transition, $q) {
}]).directive('carousel', [function() { 
    return { }
}]);
2
alexoviedo999

J'ai le même problème et je ne sais pas pourquoi, mais si vous supprimez dans votre HTML data-slide="prev" et data-slide="next" l'erreur disparaît.

2
Negrier Aurelien

Ajoutez ng-non-bindable et changez href pour data-target

<a class="left carousel-control" data-target="#myCarousel" role="button" data-slide="prev" ng-non-bindable><</a>
<a class="right carousel-control" data-target="#myCarousel" role="button" data-slide="next" ng-non-bindable>></a>
1
AMP

Supprimez simplement ui.bootstrap de la liste des modules si vous n'en avez pas besoin.

1
Malygin