我遇到让旋转木马正常工作的问题。我用yeomen来支撑角度应用程序。 我收到此错误
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 && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && 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 && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && 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>
我的控制器是
'use strict';
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中有旋转木马(如错误所示)。当我添加旋转木马时,错误就消失了,但我的旋转木马不再工作了,看起来也很糟糕。
以下是我对html的更改
<div id="Carousel" class="carousel slide" carousel>
这是它的外观,你可以看到猫脸上有一个额外的箭头。我不知道该怎么回事。任何帮助都会得到赞赏
答案 0 :(得分:37)
我能够通过将ng-non-bindable添加到具有data-slide指令的元素来解决冲突。见下文:
<a data-slide="prev" href="#clients-slider" ng-non-bindable class="left carousel-control">‹</a>
答案 1 :(得分:24)
data-slide
,因此这里存在冲突。如果你想使用普通的Bootstrap轮播方法,你可以告诉angular忽略一个DOM元素和它的子元素。
为此,请将ngNonBindable
插入相应的Dom元素。
答案 2 :(得分:2)
根据gooseman的answer on SO:
angular.module('ui.bootstrap.carousel', ['ui.bootstrap.transition'])
.controller('CarouselController', ['$scope', '$timeout', '$transition', '$q', function ($scope, $timeout, $transition, $q) {
}]).directive('carousel', [function() {
return { }
}]);
答案 3 :(得分:2)
我遇到了同样的问题但我不知道为什么,但如果您在HTML data-slide="prev"
和data-slide="next"
中删除,则错误消失。
答案 4 :(得分:1)
如果您不需要,请从模块列表中删除ui.bootstrap
。
答案 5 :(得分:1)
添加ng-non-bindable并更改数据目标
的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>
答案 6 :(得分:0)
使用角度构建忘记引导程序的javascript。仅使用css.E尤其是在使用ngRoute.It时从url中读取哈希等。对于轮播,请使用ui.bootstrap.carousel,阅读文档并查看上面显示的示例page。它简单明了。否则控制台总会出现错误,即旋转木马是否有效。