web-dev-qa-db-ja.com

カルーセルで問題を引き起こすui.bootstrapの使用

カルーセルを適切に機能させるのに問題があります。ヨーメンを使用してangularアプリを足場しました。このエラーが発生しています

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

ここに私の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>

私のコントローラーは

'厳格な使用';

angular.module（ 'myhApp'）.controller（ 'MainCtrl'、function（$ scope）{}）;

ここに私の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: '/'
      });
  });

何が原因なのかわかりません。どんな助けでもありがたいです。

**最近の調査結果**

わかりました。いくつか調べてみたところ、dom forディレクティブにカルーセルが必要であることがわかりました（エラーが示すとおり）。カルーセルを追加すると、エラーはなくなりますが、カルーセルが機能しなくなり、不安定に見えます。

これが私がhtmlに加えた変更です

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

ここにそれがどのように見えるか、そしてあなたは猫の顔に余分な矢印があるのを見ることができます。私は何が起こっているのかわかりません..どんな助けも認められます

enter image description here

enter image description here

angularjsangularjs-directiveangular-uiyeomanangular-ui-bootstrap
19
Asim Zaidi

Data-slideディレクティブを持つ要素にng-non-bindableを追加することで、競合を解決することができました。下記参照：

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

data-slideはBootstrapとui.bootstrapの両方で使用されるため、ここで競合が発生します。プレーンなBootstrapカルーセルメソッドを使用する場合は、 angular DOM要素とその子を無視します。

そのためには、適切なDom要素に ngNonBindable を挿入します。

24
emanon

グースマンのように 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

同じ問題があり、理由はわかりませんが、HTMLで削除した場合data-slide="prev"およびdata-slide="next"エラーが消えます。

2
Negrier Aurelien

Ng-non-bindableを追加し、data-targetのhrefを変更します

<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

削除するだけui.bootstrap必要ない場合は、モジュールのリストから。

1
Malygin

angularを使用してビルドする場合は、ブートストラップのjavascriptを忘れてください。特にngRouteを使用する場合は、cssのみを使用してください。とりわけ、urlからハッシュを読み取ります。カルーセルの場合は、ui.bootstrap.carouselを使用して、ドキュメントをお読みください ページ に示されている例を参照してください。シンプルで簡潔です。それ以外の場合は、コンソールに常にエラーが表示されます。つまり、カルーセルが機能する場合です。

0
Alexandru