使用 ui.bootstrap 导致轮播问题 [英] using ui.bootstrap causing issues with carousel

查看：25
本文介绍了使用 ui.bootstrap 导致轮播问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在让转盘正常工作时遇到问题.我使用 yeomen 来搭建 angular 应用程序.我收到此错误

错误:[$compile:ctreq] 指令 'slide' 所需的控制器 'carousel' 无法找到！http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide在 http://localhost:9000/bower_components/angular/angular.js:78:12在 getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)在 nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)在 http://localhost:9000/bower_components/angular/angular.js:6913:13在 http://localhost:9000/bower_components/angular/angular.js:8113:11在wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)在wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)在 http://localhost:9000/bower_components/angular/angular.js:11659:26在 Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)在 Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{'主动':离开 ||(活动 &amp;&amp; ！进入)，'prev': (next || active) &amp;&amp;方向=='上一个'，'next': (next || active) &amp;&amp;方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="left carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="prev"> angular.js:10072错误:[$compile:ctreq] 无法找到指令幻灯片"所需的控制器轮播"！http://errors.angularjs.org/1.2.26/$compile/ctreq?p0=carousel&p1=slide在 http://localhost:9000/bower_components/angular/angular.js:78:12在 getControllers (http://localhost:9000/bower_components/angular/angular.js:6543:19)在 nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6712:35)在 http://localhost:9000/bower_components/angular/angular.js:6913:13在 http://localhost:9000/bower_components/angular/angular.js:8113:11在wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)在wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11573:81)在 http://localhost:9000/bower_components/angular/angular.js:11659:26在 Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12702:28)在 Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:12514:31) <div ng-class="{'主动':离开 ||(活动 &amp;&amp; ！进入)，'prev': (next || active) &amp;&amp;方向=='上一个'，'next': (next || active) &amp;&amp;方向=='下一个'，'右':方向=='上一个'，'左':方向=='下一个'}" class="right carousel-control item text-center ng-isolate-scope" ng-transclude="" href="#Carousel" data-slide="next"> angular.js:10072

这是我的 html 文件

 <样式>#slides_control >div{高度:200px；}图片{保证金:自动；宽度:400px；}#slides_control {位置:绝对；宽度:400px；左:50%；顶部:20px；左边距:-200px;}.carousel-control.right {背景图像:线性渐变(向右，rgba(0, 0, 0, .0001) 0%, rgba(237, 232, 232, 0.5) 100%)！重要；}.carousel-control.left {背景图像:线性渐变(向右，rgba(249, 248, 248, 0.5) 0%, rgba(0, 0, 0, .0001) 100%)！重要；}</风格><div id="旋转木马" class="旋转木马幻灯片"><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 class="item"><img src="images/sliders/main_page_slider/PhoneApp_Website_Home_45.png" class="img-responsive">

<div class="item"><img src="images/sliders/main_page_slider/PhoneApp_Website_Home_49.png" class="img-responsive">

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

我的控制器是

'使用严格';

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

这是我的 app.js

角度.module('myhApp', ['ngAnimate','ngCookies','ngResource','ngRoute','ngSanitize','ngTouch','ui.bootstrap']).config(function ($routeProvider) {$routeProvider.什么时候('/'， {templateUrl: 'views/main.html',控制器:'MainCtrl'}).when('/关于', {templateUrl: 'views/about.html',控制器:'关于Ctrl'}).除此以外({重定向到:'/'});});

我不确定是什么原因造成的.任何帮助将不胜感激.

** 最近的一些发现 **

好的，我进行了一些挖掘，发现我必须在 dom for 指令中使用轮播(如错误所示).当我添加轮播时，错误消失了，但我的轮播不再工作，而且看起来也很不稳定.

这是我对html所做的更改

这是它的外观，您可以看到猫脸上有一个额外的箭头.我不确定发生了什么......任何帮助都会受到赞赏

解决方案

我能够通过向具有 data-slide 指令的元素添加 ng-non-bindable 来解决冲突.见下文:

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

I am having issues with getting the carousel working properly. I used yeomen to scaffold the angular app. I am getting this error

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

here is my html file

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

my controller is

'use strict';

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

here is my 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: '/'
      });
  });

I am not sure whats causing it. Any help will be appreciated.

** Some findings recently **

ok I did some digging around and found out that I have to have carousel in the dom for directive (as the error indicates). When I add carousel, the error goes away but my carousel doesnt work anymore and looks wonky as well.

Here is the change that I made to html

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

here is how it looks and you can see there is an extra arrow in the cats face. I am not sure whats going..any help will be apprecitaed

解决方案

I was able to solve the conflict by adding the ng-non-bindable to the elements that have the data-slide directive. see below:

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

这篇关于使用 ui.bootstrap 导致轮播问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆