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 && !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
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
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
