wake-up-neo.net

verwendung von ui.bootstrap verursacht Probleme mit dem Karussell

Ich habe Probleme damit, dass das Karussell richtig funktioniert. Ich habe mit yeomen die Winkel-App gerüstet .. Ich bekomme diesen Fehler

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

hier ist meine HTML-Datei

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

mein Controller ist 

'streng verwenden';

angle.module ('myhApp') .controller ('MainCtrl', Funktion ($ scope) {});

hier ist meine 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: '/'
      });
  });

Ich bin nicht sicher, was es verursacht. Jede Hilfe wird geschätzt.

** Einige Befunde vor kurzem **

ok, ich habe ein bisschen herumgegraben und herausgefunden, dass ich für dom eine Direktive mit Karussell haben muss (wie der Fehler anzeigt). Wenn ich ein Karussell hinzufüge, wird der Fehler behoben, aber mein Karussell funktioniert nicht mehr und sieht auch verdächtig aus.

Hier ist die Änderung, die ich an HTML vorgenommen habe

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

so sieht es aus und Sie können sehen, dass sich ein zusätzlicher Pfeil im Katzengesicht befindet. Ich bin mir nicht sicher, was los ist. Jede Hilfe wird geschätzt

enter image description here

enter image description here

19
Autolycus

Ich konnte den Konflikt lösen, indem ich den Elementen, die über die Daten-Folien-Direktive verfügen, die Option ng-non-bindable hinzufügen. siehe unten:

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

data-slide wird sowohl von Bootstrap als auch von ui.bootstrap verwendet, sodass hier ein Konflikt vorliegt. Wenn Sie die einfache Bootstrap-Karussellmethode verwenden möchten, können Sie das DOM-Element und die untergeordneten Elemente ignorieren.

Fügen Sie dazu ngNonBindable in das entsprechende Dom-Element ein.

24
emanon

Wie pro Gooseman Antwort auf 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

Ich habe das gleiche Problem und weiß nicht warum, aber wenn Sie in Ihrem HTML-Code data-slide="prev" und data-slide="next" löschen, verschwindet der Fehler.

2

Fügen Sie ng-non-bindable hinzu und ändern Sie href für das Datenziel

<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

Entfernen Sie einfach ui.bootstrap aus der Liste der Module, wenn Sie es nicht benötigen.

1
Malygin

Beim Bauen mit Winkel vergessen Sie das Bootstrap-Javascript. Verwenden Sie nur die Datei css.Wenn insbesondere ngRoute verwendet wird. Es liest unter anderem die Hashwerte von der URL. Für Karussells verwenden Sie ui.bootstrap.carousel, lesen Sie das Dokument und sehen Sie sich das Beispiel an, das in der Seite Es ist einfach und prägnant. Andernfalls wird immer ein Fehler in der Konsole angezeigt, dh, wenn das Karussell funktioniert.

0
Alexandru