<https://lh5.googleusercontent.com/-M_EQ4S67Iv8/VDyvSviaw6I/AAAAAAAAAbI/Z77K634OV-A/s1600/Screen%2BShot%2B2014-10-13%2Bat%2B10.00.43%2BPM.png>
<https://lh3.googleusercontent.com/-K4ZWdhRQwZ4/VDyvFkB8OQI/AAAAAAAAAbA/eZE7W9EQv5Q/s1600/Screen%2BShot%2B2014-10-13%2Bat%2B10.00.23%2BPM.png> ** 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 <https://lh3.googleusercontent.com/-K4ZWdhRQwZ4/VDyvFkB8OQI/AAAAAAAAAbA/eZE7W9EQv5Q/s1600/Screen%2BShot%2B2014-10-13%2Bat%2B10.00.23%2BPM.png> <https://lh5.googleusercontent.com/-M_EQ4S67Iv8/VDyvSviaw6I/AAAAAAAAAbI/Z77K634OV-A/s1600/Screen%2BShot%2B2014-10-13%2Bat%2B10.00.43%2BPM.png> On Monday, October 13, 2014 8:53:15 PM UTC-7, Autolycus wrote: > > 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.
